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

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

The 文档 http://vuejs.org/guide/class-and-style.html#Object_Syntax-1说使用“Kebab-case”或“camel-case”。

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

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

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

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

这是一个正在运行的简化小提琴：https://jsfiddle.net/89af0se9/1/ 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'"

or

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

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

更多信息请点击这里：引用 url() 的值真的有必要吗？ https://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary