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
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" ] }