web-dev-qa-db-ja.com

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

要素の画像のソースをバインドしようとしていますが、うまくいかないようです。 「無効な式。生成された関数本体：{backgroundImage：{url（image）}」を取得しています。

documentation は、「Kebab-case」または「camel-case」のいずれかを使用することを示しています。

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

ここにフィドルがあります： https://jsfiddle.net/0dw9923f/2/

javascripthtmlvue.js
52
CosX

問題は、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オブジェクトであり、同じルールに従います。

更新：これを機能させるのに苦労する理由についてのもう一つの注意。

最終的な結果の文字列が次のようになるように、image値を引用符で囲む必要があります。

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

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

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

または

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

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

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

136
David K. Hess
<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>
12
mohammad nazari

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

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

別の解決策：

<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()は常に現在のファイルのパスに対して相対的であることを忘れないでください。

1
egdavid

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

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

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

単一の繰り返しコンポーネントの場合、このテクニックは私にとってはうまくいきます

<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+')'
                }
            },
}
0
Ahadul