VueJS V-バインド：背景画像のスタイル：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

計算されたプロパティを使用するには、非常にうまく機能し、かつクリーナーです：

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

Answer 3

これを行います。それはテンプレートに対しても機能します。

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

Answer 4

は@ T.Abdullaevの回答に基づいて、余分な二重引用符で この1は私のために働きました。

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