Vue js dynamic binding background image style not working

Question

Background image not applying to this div when i was calling changeBgImage function on load.I searched through the web but not getting the desired result.Please help me

<div class="home_search" id="home_search" v-bind:style="{ background: `url(${imageUrl}) no-repeat center` }">
  <HeaderComponent />
</div>

changeBgImage () {
  let rand = Math.round(Math.random() * 4);
  this.imageUrl = "../assets/img/home_" + rand + ".jpg";
  console.log(this.imageUrl)

}

Un1 · Accepted Answer · 2018-08-30 12:46:28Z

2

You have to add width and height to the tag (or container)

Example: https://codepen.io/anon/pen/vzyjww?editors=1010

<div 
  :style="{ background: `url(${imageUrl}) no-repeat center` }" 
  style="width: 350px; height: 150px"
>
</div>

answered Aug 30, 2018 at 12:46

Un1

4,15214 gold badges43 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js dynamic binding background image style not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related