Laravel 刀片变量未在 IE 中以内联样式属性呈现答案

【问题标题】：Laravel blade variable not rendered in inline-style attribute in IELaravel 刀片变量未在 IE 中以内联样式属性呈现
【发布时间】：2015-11-04 18:22:47
【问题描述】：

我们将 Laravel 框架与 Vue.js 结合用于后台。对于文件管理，我们创建了带有预览的图块以及我们通过 api 调用获得的一些信息：

<div class="image-tile">
    <div class="preview" v-style="background-image: url('@{{tent.files[fileId].path + '/thumb/' + tent.files[fileId].name }}')">
</div>
<div class="info">
    @{{tent.files[fileId].name}}<br/>
    @{{tent.files[fileId].width}} x @{{tent.files[fileId].height}}<br/>
    @{{(tent.files[fileId].size / 1024).toFixed(2)}}KB
</div>

虽然信息完美呈现，但网址却不是：

style="background-image: url('{{file.path + '/thumb/' + file.name }}');"

这应该是结果（就像在 chrome 和 ff 中一样）

background-image: url('/uploads/flyfish/thumb/example.jpg');

这是 Internet Explorer 中的默认行为吗？

【问题讨论】：

我确定这个问题来自 vuejs 而不是 laravel，你应该在标签中添加 vuejs
你能澄清一下吗？你是说上面的 background-image 正是你在 Vue 渲染后在 DOM 中找到的？这种情况是只发生在 IE 上还是发生在所有浏览器上？
@DavidK.Hess 这确实是我在 Vue 渲染后在 DOM 中找到的内容。所有其他值都渲染得很好。它发生在使用 IE8 的客户端和使用 IE11 的我身上。有使用IE10的朋友说没有遇到这个问题。在 chrome on ff 上没有问题，虽然我必须管理我无法测试所有浏览器的向后兼容性，但我想 chrome 和 ff 用户大多是最新的。
至于 IE8，此警告在 repo 的 README 中：“请注意，Vue.js 仅支持符合 ES5 的浏览器（不支持 IE8 及以下版本）。”至于IE11，Javascript控制台没有报错？
@DavidK.Hess 我刚刚在我的家用电脑上测试了它，但在控制台中没有任何错误

标签： css laravel blade vue.js inline-styles

【解决方案1】：

显然 IE 会导致模板样式属性出现问题 - 请参阅此已关闭问题：

https://github.com/yyx990803/vue/issues/651

建议改用v-style：

http://vuejs.org/api/directives.html#v-style

类似这样的：

<div class="image-tile">
    <div class="preview" v-style="background-image: 'url(' + tent.files[fileId].path + '/thumb/' + tent.files[fileId].name + ')'>
</div>
<div class="info">
    @{{tent.files[fileId].name}}<br/>
    @{{tent.files[fileId].width}} x @{{tent.files[fileId].height}}<br/>
    @{{(tent.files[fileId].size / 1024).toFixed(2)}}KB
</div>

【讨论】：

我尝试了您的示例以及其他组合，但现在我的 div 中根本没有样式属性。
你能用小提琴重现这个吗？
现在复制太复杂了。我知道明天我可以做些什么来简化