2

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.

Stephan-v
  • 19,255
  • 31
  • 115
  • 201

1 Answers1

3
<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})` }">
dwenzel
  • 1,404
  • 9
  • 15
Yerko Palma
  • 12,041
  • 5
  • 33
  • 57
  • @dwenzel @Yerko Palma I have something similar but I am getting an error in the console for my bound :style ```:style="{ 'background-image': `url(${invitedClass.imagePath})`}">``` and the error is: ```[Vue warn]: Error compiling template: invalid expression: Unexpected token ':' in ```Why is it not liking the colon? – CodeConnoisseur Sep 02 '20 at 22:08
  • @PA-GW - can you post the entire tag? – dwenzel Sep 02 '20 at 22:34
  • @dwenzel - this is the full anchor tag: `````` and this is is my vue component declaration ```
    ```     – CodeConnoisseur Sep 03 '20 at 14:31
  • @PA-GW - Not seeing anything obvious... I would ask a separate Stack Overflow question, as this looks different from the initial one – dwenzel Sep 03 '20 at 14:43