VueJS v-bind:background-image的样式:url()

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

根据@T.Abdullaev 的回答，这个带有额外双引号的答案对我有用。

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