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

2022-08-30 04:33:42

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

文档说使用“烤肉串盒”或“骆驼盒”。

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

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


答案 1

问题是 的值需要是如下所示的字符串:backgroundImage

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

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

回复:下面关于烤肉串的评论,这就是你如何做到这一点:

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

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

更新:关于为什么您可能无法使其正常工作的另一个注意事项。

应确保用引号将值括起来,以便最终生成的字符串为:image

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

否则,如果图像 URL 中包含特殊字符(如空格或括号),则浏览器可能无法正确应用它。在 Javascript 中,赋值如下所示:

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

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

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

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


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