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>
:style="{ 'background-image' : 'url(' + user.image + ')' }">
:style="{ 'backgroundImage' : 'url(' + user.image + ')' }">
:style="{ backgroundImage : 'url(' + user.image + ')' }">
:style
<div class='table-image'></div>
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 + '\')' }"