VueJS v-ràng buộc: phong cách cho background-image: url()

Question

Theo VueJS tài liệu:

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

Tôi đã thử một vài mẫu:

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

Nhưng kết quả không hợp lệ cho thuộc tính HTML style.

Bất kỳ ý tưởng nào?

Answer 1

Sau khi thử mẫu khác, đây là một trong những hoạt động:

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

Kết quả trong:

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

Answer 2

Sử dụng một tài sản tính hoạt động rất tốt, và là sạch hơn:

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

Answer 3

Thực hiện việc này. Nó cũng hoạt động cho các mẫu.

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

Answer 4

dựa trên câu trả lời @ T.Abdullaev của, này với thêm dấu nháy kép làm việc cho tôi.

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