Vue.js 数据绑定样式背景图像不起作用

Question

我正在尝试将图像的 src 绑定到元素中，但它似乎不起作用。我收到“无效的表达式。生成的函数体：{ backgroundImage:{ url(image) }”。

文档 说使用“Kebab-case”或“camel-case”。

 <div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

这是一个小提琴： https ://jsfiddle.net/0dw9923f/2/

原文由 CosX 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是 backgroundImage 的值需要是这样的字符串：

 <div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>

这是一个正在工作的简化小提琴： https ://jsfiddle.net/89af0se9/1/

回复：下面关于 kebab-case 的评论，你可以这样做：

 <div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>

换句话说， v-bind:style 的值只是一个普通的 Javascript 对象并且遵循相同的规则。

更新：关于为什么您可能无法使其正常工作的另一条注释。

您应该确保引用您的 image 值，以便最终生成的字符串为：

 url('some/url/path/to/image.jpeg')

否则，如果您的图像 URL 中包含特殊字符（例如空格或括号），浏览器可能无法正确应用它。在 Javascript 中，分配如下所示：

 this.image = "'some/url/path/to/image.jpeg'"

或者

this.image = "'" + myUrl + "'"

从技术上讲，这可以在模板中完成，但是保持其有效 HTML 所需的转义是不值得的。

更多信息在这里： 引用 url() 的值真的有必要吗？

原文由 David K. Hess 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>

原文由 mohammad nazari 发布，翻译遵循 CC BY-SA 4.0 许可协议