Question

根据VueJS文档：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

我尝试了几种模式：

<div v-bind:style="{ background-image: url(item.img), }"></div>

<div v-bind:style="{ 'background-image': url('item.img'), }"></div>

<div v-bind:style='{ backgroundImage: "url(item.img)", }'></div>

但结果对HTML style属性无效。

有什么想法吗？

Answer 1

尝试其他模式后，这是有效的模式：

<div v-bind:style='{ backgroundImage: "url(" + item.img + ")", }'></div>

结果：

<div style='{ background-image: url("/img/path/img.jpg"), }'></div>

Answer 2

使用计算属性非常有效，而且更清晰：

computed: {
     imageUrl: function() {
         return 'url('+ this.path + ')';
     }
},

Answer 3

这样做。它也适用于模板。

<div :style='{ backgroundImage: `url(${item.img})` }'></div>

Answer 4

根据@ T.Abdullaev的回答，这个带有额外双引号的人为我工作。

v-bind:style='{ backgroundImage: `url("${imgUrl}")` }'

Answer 5

对我来说，这似乎很好：

 :style="{
      'background-image': 'url(' + require(`../assets/img/${imageName}`) + ')'
  }"

由于我所有的图像都在资产文件夹中，因此可以使用上述模式访问这些图像。

VueJS v-bind：background-image的样式：url（）

5 个答案: