我试图将图像的src绑定到元素中，但似乎不起作用.我得到一个"无效表达式.生成的函数体:{background Image:{url(Image)}".
documentation人说可以使用"烤肉串盒"或"骆驼盒".
<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>
这里有一把小提琴:https://jsfiddle.net/0dw9923f/2/
我试图将图像的src绑定到元素中，但似乎不起作用.我得到一个"无效表达式.生成的函数体:{background Image:{url(Image)}".
documentation人说可以使用"烤肉串盒"或"骆驼盒".
<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>
这里有一把小提琴:https://jsfiddle.net/0dw9923f/2/
问题是backgroundImage的值需要是如下所示的字符串:
<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>
这里有一把有效的简化小提琴:https://jsfiddle.net/89af0se9/1/
回复:下面关于烤肉串的 comments ，你可以这样做:
<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 + "'"
Technically, this could be done in the template, but the escaping required to keep it valid HTML isn't w或th it.
M或e info here: Is quoting the value of url() really necessary?