Vue.js 无法在 :style （树枝模板）中设置背景图像答案

【问题标题】：Vue.js can't set background-image in :style (twig template)Vue.js 无法在 :style （树枝模板）中设置背景图像
【发布时间】：2017-12-17 16:48:07
【问题描述】：

我在 Symfony 3.4 项目中使用 Vue.js。

我在通过 Vue.js 从对象设置背景图像时遇到问题

我正在通过 Vue 循环遍历我的元素，并从对象中插入一些数据。一切都很好，而不是图像。

<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 + ')' }">

没有任何效果:(

有人可以帮我吗？

我在 TWIG 模板中使用它。

Vue.js v2.5.11

编辑！以防万一。

Vue 正在删除 :style 属性并且没有插入任何东西，我的意思是：在源代码中我只能看到 <div class='table-image'></div> 没有样式。

【问题讨论】：

标签： javascript vue.js twig

【解决方案1】：

在制作 css 样式选择器时，引用任何包含特殊字符的部分很重要。

此刻，当你输出一个url时，它被输出为backgroundImage: url(/im/test.png)。您可能注意到了，没有引用该值。

虽然您的方法在输入没有特殊字符时有效，但当包含任何特殊字符时，将发出未定义的行为。

您应该在样式声明中添加引号：

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

【讨论】：

这也有效！谢谢！无论如何我改变了我的上传文件控制器，我保存了没有空格的文件名，然后它在 url() 中没有引号。

【解决方案2】：

我找到了解决办法。

文件名不能包含空格。这就是它不起作用的原因。

希望这对某人有帮助。

【讨论】：