Vue.js data-bind style backgroundImage not working

Question

I\'m trying to bind the src of an image in an element, but it doesn\'t seem to work. I\'m getting an \"Invalid expression. Generated function body: { backgroundImage:{ url(

Answer 1

<div :style="{ backgroundImage: `url(${post.image})` }">

there are multiple ways but i found template string easy and simple

Answer 2

<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>

Answer 3

Binding background image style using a dynamic value from v-for loop could be done like this.

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>