webentwicklung-frage-antwort-db.com.de

Vue.js Datenbindungsstil backgroundImage funktioniert nicht

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

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

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

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

37
CosX

Das Problem ist, dass der Wert für backgroundImage eine Zeichenfolge wie folgt 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 zu 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:style ist nur ein einfaches Javascript-Objekt und folgt denselben Regeln.

UPDATE: Noch eine Anmerkung, warum Sie Probleme damit haben, dies zu erreichen.

Sie sollten sicherstellen, dass Ihr image-Wert in Anführungszeichen gesetzt ist, so dass 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), wird sie vom Browser möglicherweise nicht ordnungsgemäß angewendet. In Javascript würde die Zuweisung so aussehen:

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

oder

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

Technisch könnte dies in der Vorlage erfolgen, aber das Umgehen, das erforderlich ist, um gültiges HTML zu erhalten, ist es nicht wert.

Mehr Infos hier: Ist der Wert von url () wirklich notwendig?

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

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, Sie tun dies), können Sie es per Webpack laden.

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

1
egdavid

Ich hatte ein Problem, 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>
0
WDuffy

Ein bindender Hintergrundbildstil, der eine dynamic value aus v-for loop verwendet, könnte auf diese Weise ausgeführt werden. 

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

Für einzelne, wiederholte Komponenten arbeitet 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+')'
                }
            },
}
0
Ahadul