VueJS V-bind:style For Background-image: Url()

According to VueJS docs:

I've tried several patterns:

Results in:

<div style='{ background-image: url("/img/path/img.jpg"), }'></div>

Solution 2:

Do this. It works also for templates.

<div :style='{ backgroundImage: `url(${item.img})` }'></div>

Solution 3:

based on @T.Abdullaev's answer, this one with extra double quote worked for me.

v-bind:style='{ backgroundImage: `url("${imgUrl}")` }'

Solution 4:

Using a computed property works very well, and is cleaner:

computed: {
     imageUrl: function() {
         return 'url('+ this.path + ')';
     }
},

Solution 5:

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.

Share