Assign background-image as variable in vuejs

Question

I have got a vue.js component with a div.icon:

Vue.component('obj', {
  props: ['img', 'name'],
  template: '<div><div class="icon"></div> {{ name }}</div>'
})

While its easy to use {{ name }}, I do not know how to pass {{ img }}.

I have tried to add the following code, which does not work:

v-bind:style="{ backgroundImage: 'url(' + {{ img }} + ')' }"

How can I use the props: img to assign a background-image?

Blue · Accepted Answer · 2017-06-27 23:23:08Z

4

Use 'background-image' from this issue:

v-bind:style="{ 'background-image': 'url(' + img + ')' }"

edited Jun 27, 2017 at 23:23

answered Jun 27, 2017 at 22:56

Blue

23k7 gold badges69 silver badges102 bronze badges

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

4 Comments

Marian Rick Over a year ago

This causes an error: > Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.

Marian Rick Over a year ago

thanks for the suggestion, but this does work neither. As the whole template: '' tag is wrapped inside the ' ' signs, the code creates a syntax error.

Blue Over a year ago

Escape them with \'

Marian Rick Over a year ago

Thanks. Please add this important note to your answer for others to find it :)

Collectives™ on Stack Overflow

Assign background-image as variable in vuejs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related