vueでのbackgroun-imageの表示について

Question

vue init webpack ○○
で作成しています。

インラインでなくcssに記載する

.test{
    background-image: url(./../assets/***.jpg);
}

を行う方法が分からず困っております。

下記方法だと出来たのですが、これだとメディアクエリでの画像の切り替えが出来ませんでした。

<p :style="file" class="test"></p>


import file from '@/assets/file.jpg'

  data(){
      return {
          mv: {
                backgroundImage: "url(" + file + ")",
          }
      }
  },

何かお知恵を頂けますと幸いです。

Answer 1

assets配下はwebpackによるバンドルで処理されるので、静的なcssでは使用できません。
cssに書きたい場合&画像をassets配下に置く必要がない場合はstaticに画像を配置し、
下記のように記述できるかと思います。

.test{
    background-image: url(./static/***.jpg);
}

Comments

[yassan1212]

ご回答ありがとうございます！
ご回答を頂戴でき、とてもうれしいです！

App.vueに

```
background-image: url(./static/***.jpg);
```

と記述すると、

```
ERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5a65f86e","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './static/mv.jpg' in 'C:\Users\USER\Desktop\vuex\test-rest\src'
```

とエラーとなってしまったので、

```
background-image: url(./../static/mv.jpg);
```

としてみましたら、run buildは通ったのですが、表示されないようでした

せっかくご回答頂いたのに、力不足で解決できず申し訳ございません。

[gyarasu]

https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder
が参考になると思います。

publicPathが`/`の場合は

```
background-image: url('/mv.jpg');
```

でいけるかと思います