首页 文章

Vue.js无法在以下位置设置背景图像：样式（树枝模板）

提问于
浏览 次
3

我在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

EDIT! 以防万一 .

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

javascript vue.js twig

2 回答

  • 1

    在创建css样式选择器时，引用包含特殊字符的任何部分非常重要 .

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

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

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

    :style="{ 'background-image' : 'url(\'' + user.image + '\')' }"
    回复于
  • 0

    我找到了解决方案 .

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

    希望这会有一次帮助某人 .

    回复于

相关问题