vue cli 3 – use background image in style tag
Cssvue.jsVue CliCss Problem Overview
I want to use a svg image from my assets folder in one of my components as a background-image. Here is an example of my component:
<template>
<div class="container"></div>
</template>
<script>
export default {
name: 'component'
}
</script>
<style scoped lang="scss">
.container {
height: 40px;
width: 40px;
background-image: url('@/assets/image.svg');
}
</style>
But the image doesn't show. The Path is correct. Where is my mistake? Thanks for your help.
Css Solutions
Solution 1 - Css
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
Solution 2 - Css
I would recommend using style binding. I found this thread really helpful [link][1].
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 [1]: https://github.com/vuejs/vue-loader/issues/646#issuecomment-377683536
Solution 3 - Css
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"
]
}
Solution 4 - Css
Make sure the image extension is lowercase. If the image has an uppercase extension, change it to be lowercase otherwise it won't work.
<style lang="scss">
.section{
background-image: url('~@/assets/photos/DSC08611.jpg'); //WORKED!
background-image: url('~@/assets/photos/DSC08611.JPG'); //DID NOT WORK
}
</style>