vue cli 3 – use background image in style tag vue cli 3 – use background image in style tag vue.js vue.js

vue cli 3 – use background image in style tag


As Max Martynov, highlighted in the comments, you should use url('~@/assets/image.svg').

 

Webpack has some specific rules when resolving assets[1].

In order to resolve an alias (@), as you are using, it is mandatory webpack handles the request as a module request. Using the prefix ~ enforces webpack to treat the request as a module request, similar to require('some-module/image.svg').

 

References

  1. https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules


I would recommend using style binding. I found this thread really helpful link.

Here an example using bootstrap cards

    <div      class="card-image"      :style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">

The image is in src/assets/images/cards.jpg


This is what worked for me.

<div  class="image"  v-for="(image, imageIndex) in slideshow"  :key="imageIndex"  :style="{ backgroundImage: 'url(' + require(`@/assets/${image}`) + ')', width: '300px', height: '200px' }"></div>

Where slideshow looks like:

data() {      return {        slideshow : [          "MyImages/1.png",          "MyImages/2.png"        ]      }