Vue.js Datenbindungsstil backgroundImage funktioniert nicht

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

In der Dokumentation heißt es, entweder "Kebab-Fall" oder "Kamel-Fall" zu verwenden.

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

Hier ist eine Geige: https://jsfiddle.net/0dw9923f/2/

Das Problem ist, dass der Wert für backgroundImageeine Zeichenfolge wie die folgende sein muss:

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

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

Betreff: Der Kommentar unten über Kebab-Fall, so können Sie das tun:

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

Mit anderen Worten, der Wert für v-bind:styleist nur ein einfaches Javascript-Objekt und folgt denselben Regeln.

UPDATE: Ein weiterer Hinweis, warum Sie möglicherweise Probleme haben, dies zum Laufen zu bringen.

Sie sollten sicherstellen, dass Ihr imageWert in Anführungszeichen steht, damit die am Ende resultierende Zeichenfolge lautet:

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

Wenn Ihre Bild-URL Sonderzeichen enthält (z. B. Leerzeichen oder Klammern), wendet der Browser diese möglicherweise nicht richtig an. In Javascript würde die Zuweisung folgendermaßen aussehen:

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

oder

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

Technisch könnte dies in der Vorlage erfolgen, aber das Escapezeichen, das erforderlich ist, um gültiges HTML beizubehalten, lohnt sich nicht.

Mehr Infos hier: Ist es wirklich notwendig, den Wert von url () anzugeben?

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

Eine andere Lösung:

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

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

Was macht diese Lösung bequemer? Erstens ist es sauberer. Und wenn Sie Vue CLI verwenden (ich nehme an, dass Sie dies tun), können Sie es mit Webpack laden.

Hinweis: Vergessen Sie nicht, dass dies require()immer relativ zum Pfad der aktuellen Datei ist.

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

Es gibt mehrere Möglichkeiten, aber ich fand Template String einfach und unkompliziert

Das Binden des Hintergrundbildstils unter Verwendung eines dynamischen Werts aus der v-for- Schleife könnte folgendermaßen erfolgen.

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

Für einzelne wiederholte Komponenten funktioniert diese Technik für mich

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

Ich habe versucht, @david zu antworten, aber es hat mein Problem nicht behoben . Nach viel Aufwand habe ich eine Methode erstellt und das Bild mit einer Stilzeichenfolge zurückgegeben.

HTML Quelltext

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

Methode

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

Ich habe ein Problem festgestellt, bei dem Hintergrundbilder mit Leerzeichen im Dateinamen dazu führten, dass der Stil nicht angewendet wurde. Um dies zu korrigieren, musste ich sicherstellen, dass der Zeichenfolgenpfad in einfache Anführungszeichen eingeschlossen war.

Beachten Sie das Escapezeichen in meinem Beispiel unten.

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

Die akzeptierte Antwort schien das Problem für mich nicht zu lösen, aber das tat es

Stellen Sie sicher, dass Ihre backgroundImage-Deklarationen in URLs (und Anführungszeichen) eingeschlossen sind, damit der Stil unabhängig vom Dateinamen ordnungsgemäß funktioniert.

ES2015 Stil:

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

Oder ohne ES2015:

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

Quelle: vuejs / vue-loader Problem # 646