Ad

Vue.js - Interpolation Error - How To Rework Style To V-bind:style?

I am currently getting this console error message:

interpolation in "style" attribute will cause the attribute to be discarded in Internet Explorer. Use v-bind:style instead.

Which is caused by this piece of code:

    <div class="placeholder-img" 
    style="background-image: url({{ travel._source.field_image[0].url }})">

Now I don't know how to change this to proper syntax, it would not be hard if the background image didn't contain the url() part but now I am a bit confused on how to properly refactor this. Could anybody help me out?

Cheers.

Ad

Answer

<div class="placeholder-img" 
    v-bind:style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')' }">

When using shorthand for v-bind:

<div class="placeholder-img" 
    :style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')' }">

When using ES6 syntax:

<div class="placeholder-img" 
    :style="{ 'background-image': `url(${travel._source.field_image[0].url})` }"> 
Ad
source: stackoverflow.com
Ad