[解決済み] Vue.jsのデータバインドスタイルのbackgroundImageが機能しない。

質問

要素に画像のsrcをバインドしようとしているのですが、うまくいきません。私は、"Invalid expressionを取得しています。生成された関数 body: { backgroundImage:{ url(image) }"と表示されます。

は ドキュメント には 'Kebab-case' か 'camel-case' のどちらかを使うように書かれています。

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

ヴァイオリンの演奏です。 https://jsfiddle.net/0dw9923f/2/

どのように解決するのですか？

この問題は backgroundImage にはこのような文字列が必要であることです。

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

以下は、動作している簡略化されたフィドルです。 https://jsfiddle.net/89af0se9/1/

Re: kebab-caseについての下のコメント、これはその方法です。

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

つまり v-bind:style の値は単なるJavascriptオブジェクトであり、同じルールに従います。

UPDATE: なぜこれがうまくいかないかについてのもう一つのメモです。

あなたは image の値が引用され、結果の文字列の最後がそうなるようにします。

url('some/url/path/to/image.jpeg')

その他、画像URLに特殊文字（空白や括弧など）が含まれている場合、ブラウザが正しく適用しないことがあります。Javascriptでは、このような割り当てになります。

this.image = "'some/url/path/to/image.jpeg'"

または

this.image = "'" + myUrl + "'"

技術的には、これはテンプレートで行うこともできますが、有効なHTMLを維持するために必要なエスケープ処理はその価値がありません。

より詳しい情報はこちら。 url()の値を引用することは本当に必要なのでしょうか？