Vue.jsデータバインディングスタイルのbackgroundImageが機能しない

画像のsrcを要素にバインドしようとしていますが、機能していないようです。「無効な式。生成された関数本体：{backgroundImage：{url（image）}」が表示されます。

ドキュメントには、「ケバブ・ケース」や「キャメルケース」のいずれかを使用することを言います。

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

再：ケバブケースについての以下のコメント、これはあなたがそれをすることができる方法です：

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

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

更新：これを機能させるのに問題がある理由についてのもう1つの注意事項。

image結果の文字列が次のようになるように、値が引用符で囲まれていることを確認する必要があります。

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

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

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

または

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

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

詳細はこちら： url（）の値を引用することは本当に必要ですか？

<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>

別の解決策：

<template>
  <div :style="cssProps"></div>
</template>

<script>
  export default {
    data() {
      return {
        cssProps: {
          backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`
        }
      }
    }
  }
</script>

このソリューションをより便利にするものは何ですか？まず、それはよりきれいです。そして、Vue CLIを使用している場合（使用していると思います）、webpackでロードできます。

注：これrequire()は常に現在のファイルのパスに関連していることを忘れないでください。

<div :style="{ backgroundImage: `url(${post.image})` }">

複数の方法がありますが、テンプレート文字列は簡単でシンプルだと思いました

v-forループの動的な値を使用して背景画像スタイルをバインドするには、次のようにします。

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>

単一の繰り返されるコンポーネントの場合、この技術的な作業は私にとって

<div class="img-section" :style=img_section_style >

computed: {
            img_section_style: function(){
                var bgImg= this.post_data.fet_img
                return {
                    "color": "red",
                    "border" : "5px solid ",
                    "background": 'url('+bgImg+')'
                }
            },
}

@david answerを試しましたが、問題は解決しませんでした。大変な手間をかけた後、メソッドを作成し、スタイル文字列で画像を返しました。

HTMLコード

<div v-for="slide in loadSliderImages" :key="slide.id">
    <div v-else :style="bannerBgImage(slide.banner)"></div>
</div>

方法

bannerBgImage(image){
    return 'background-image: url("' + image + '")';
},

ファイル名にスペースが含まれている背景画像で、スタイルが適用されないという問題が発生しました。これを修正するには、文字列パスが一重引用符で囲まれていることを確認する必要がありました。

以下の私の例では、エスケープされた\ 'に注意してください。

<div :style="{
    height: '100px',
    backgroundColor: '#323232',
    backgroundImage: 'url(\'' + event.image + '\')',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
    }">
</div>

受け入れられた答えは私にとって問題を解決していないようでしたが、これは解決しました

ファイル名に関係なくスタイルが正しく機能するように、backgroundImage宣言がurl（および引用符で囲まれていることを確認してください。

ES2015スタイル：

<div :style="{ backgroundImage: `url('${image}')` }"></div>

またはES2015なし：

<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>

出典：vuejs / vue-loader issue＃646

私の知識によると、画像フォルダをパブリックフォルダに置くと、次のことができます。

   <div :style="{backgroundImage: `url(${project.imagePath})`}"></div>

画像をに入れる場合はsrc/assets/、requireを使用する必要があります。このような：

   <div :style="{backgroundImage: 'url('+require('@/assets/'+project.image)+')'}">. 
   </div>

重要なことの1つは、このような完全なURLを含む式を使用できないことですproject.image = '@/assets/image.png'。'@assets/'パーツをハードコーディングする必要があります。それが私が見つけたものでした。その理由は、Webpackでは、requireに式が含まれている場合にコンテキストが作成されるため、コンパイル時に正確なモジュールがわからないためだと思います。代わりに、@/assetsフォルダ内のすべてを検索します。詳細については、こちらをご覧ください。これは、Vueローダーが単一ファイルコンポーネントのリンクをどのように処理するかを説明する別のドキュメントです。