Question

我在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>没有样式。

Answer 1

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

目前，当您输出网址时，它会输出为backgroundImage: url(/im/test.png)。正如您可能注意到的那样，没有引用该值。

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

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

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

Answer 2

我找到了解决方案。

文件名不能包含空格。这就是它无法正常工作的原因。

希望这会对某人有所帮助。

Vue.js无法设置背景图像：style（twig template）

2 个答案: