VueJS v-bağlama: background-görüntü için stili: url()

Question

VueJS Docs göre: Birkaç kalıplarını denedim

<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> 

Ama Sonuçlar, HTML style özniteliği için geçerli değil.

Herhangi bir fikrin var mı? içinde

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

Sonuçlar: a bilgisayarlı özelliğini kullanarak

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

Answer 1

diğer desenleri denemeden sonra bu işleri biridir

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

Answer 2

çok iyi çalışır ve temizleyici:

Answer 3

Bunu yapın. Şablonlar için de çalışır.

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

Answer 4

@ T.Abdullaev en yanıta göre, ekstra çift tırnak ile bu benim için çalıştı.

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