Vue.js Datenbindung Stil backgroundImage funktioniert nicht

Question

Ich versuche, die Quelle eines Bildes in einem Element zu binden, aber es scheint nicht zu funktionieren. Ich erhalte einen "ungültigen Ausdruck. Generierter Funktionskörper: {backgroundImage: {url (image)}".

Die documentation sagt, entweder 'Kebab-Fall' oder 'Kamel-Fall' zu verwenden.

<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

Heres eine Geige: https://jsfiddle.net/0dw9923f/2/

Answer 1

Das Problem ist, dass der Wert für backgroundImage ein String so sein muss:

<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div> 

Hier ist eine vereinfachte Geige, die funktioniert: https://jsfiddle.net/89af0se9/1/

Re: der Kommentar unten über Kebab-Fall, das ist, wie Sie der Wert für v-bind:style nur ein einfaches Javascript-Objekt und folgt die gleichen Regeln

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div> 

Mit anderen Worten: kann das tun.