CODEWITHSUNDEEP
vue.js
None
None

Reputation: 9247

How to v-bind background?

Im trying to do something like this:

<div class="seller_image" :style="{background: url(' + user_credentials.avatar +'); background-size: cover !important; display:block;}">

but i get this error:

Invalid expression. Generated function body: {background:scope.url(' + user_credentials.avatar +');scope.background-scope.size:scope.cover!scope.important;scope.display:scope.block;}

Any suggestion?

Like this it working but i want to use it like background image:

<img v-bind:src="user_credentials.avatar" alt="Avatar" />

Upvotes: 1

Views: 2785

Answers (2)

The_Dude
The_Dude

Reputation: 584

The error you are getting is because you need the background value to be a string. Any additional inline styles need to be comma delimited then as well because you are passing an object. Lastly I believe styles like background-size that contain a hyphen need to be camel-cased when binding them so then the final changes to your inline styles should look like this:

<div class="seller_image" :style="{background: 'url(' + user_credentials.avatar +')', backgroundSize: 'cover !important', display: 'block'}">

Upvotes: 1

craig_h
craig_h

Reputation: 32714

It's easier to put this together inside a computed and use that instead:

new Vue({
  el: '#app',
  computed: {
    getBackground() {
      return 'background: url(' + this.user_credentials.avatar + '); background-size: cover display:block;';
    }
  },
  data: {
    user_credentials: {
      avatar: 'avatar.png'
    }
  }
})

Then you can use it like so:

<div :style="getBackground"></div>

Here's the JSFiddle:

https://jsfiddle.net/w6agzuen/

Upvotes: 4

Related Questions