Vue.js can't set background-image in :style (twig template)

Question

I'm using Vue.js at my Symfony 3.4 project.

I have a problem with seting my background-image from object via Vue.js

I'm looping through my elements via Vue and just inserting some data from object.
Everything is fine instead of the image.

<tr v-for="user in userObj">

    <td>

        <div class='table-image' 

             :style="{ 'background-image' : 'url(' + user.image + ')' }">

        </div>

    </td>

</tr>

I was trying

:style="{ 'background-image' : 'url(' + user.image + ')' }">

Also:

:style="{ 'backgroundImage' : 'url(' + user.image + ')' }">

Continuing:

:style="{ backgroundImage : 'url(' + user.image + ')' }">

NOTHING is working :(

Can someone help me with that?

I'm using it in TWIG template.

Vue.js v2.5.11

EDIT! just in case.

Vue is removing

:style

attribute and not inserting anything, I mean: at the source code I just can see

<div class='table-image'></div>

without style.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

When making a css style selector, it is important to quote any part containing special characters.

At the moment, when you output a url, it is outputted as backgroundImage: url(/im/test.png). As you probably notice, there is no quoting of the value.

While your method works when the input has no special characters, when any special character is included, undefined behaviour will be emitted.

You should add quotes to the style declaration:

:style="{ 'background-image' : 'url(\'' + user.image + '\')' }"

Vue.js can't set background-image in :style (twig template)

Sign up