According to VueJS docs:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
I've tried several patterns:
<div v-bind:style="{ background-image: url(item.img), }"></div>
<div v-bind:style="{ 'background-image': url('item.img'), }"></div>
<div v-bind:style='{ backgroundImage: "url(item.img)", }'></div>
But the results are not valid for the HTML style attribute.
Any ideas?
After trying other patterns, this is the one that works:
<div v-bind:style='{ backgroundImage: "url(" + item.img + ")", }'></div>
Results in:
<div style='{ background-image: url("/img/path/img.jpg"), }'></div>
based on @T.Abdullaev's answer, this one with extra double quote worked for me.
v-bind:style='{ backgroundImage: `url("${imgUrl}")` }'
Do this. It works also for templates.
<div :style='{ backgroundImage: `url(${item.img})` }'></div>
For me this seemed to work just fine:
:style="{
'background-image': 'url(' + require(`../assets/img/${imageName}`) + ')'
}"
Since all my images were in the assets folder, the images could be accessed using the above pattern.
Using a computed property works very well, and is cleaner:
computed: {
imageUrl: function() {
return 'url('+ this.path + ')';
}
},
