Question

我们将Laravel框架与Vue.js结合使用作为后台。对于文件管理，我们使用预览创建了切片，并通过api-call创建了一些信息：

<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中的默认行为吗？

Answer 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>

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

1 个答案: