Vue 2 - Berechnung berechnet backgroundImage dynamisch

Ich habe einige divs und ich muss die Hintergründe von jedem von Werten, die ich in einem Array habe. Ich habe versucht, zu jedem von ihnen die Hintergrundüberlagerung zu setzen, indem die berechnete Eigenschaft zu erstellen:Vue 2 - Berechnung berechnet backgroundImage dynamisch

computed: { 
     backgroundImage(url) { 
     let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
     return 'background-image:'+ overlay +' , url(' + url + ');'; 
     } 
    }

Und dann dachte ich die URL wie folgt berechnet Eigenschaft vorbei:

:style="{ backgroundImage: url(`${articles[0].image.src}`) }"

Aber die funktioniert nicht, ich bekomme den berechneten Wert nicht zurück, wie kann ich das tun?

Quelle

2017-08-30 Leff

dies Ihr Problem nicht lösen können, aber Sie sollten den 'Hintergrund-image', da Sie nicht mehr zurück habe schon diesen Teil in deinem Stil verbindlich definiert. Vielleicht kannst du zeigen, was eigentlich aus der Stilbindung kommt. –

Ich bekomme nur das '' 'style =" background: url ("http://my.app/content/uploads/2017/08/5948f40c8b13a84b075de6e9.png"); "' '', ohne das Overlay. – Leff

Warum schreiben Sie übrigens das 'overlay'-CSS in Ihrer berechneten Eigenschaft fest? Warum nicht "Hintergrundbild" und "Hintergrundfarbe" anstelle des zusammengesetzten Hintergrunds verwenden? Auf diese Weise können Sie es leicht mit CSS lösen. –

-1

, wenn Ihre Daten festgelegt ist und der Hintergrund wird sich nicht ändern, dann setzen Sie könnten einfach den Hintergrund wie:

:style="{ background: `url(${articles[0].image.src})`}"

wenn die articles haben zuerst berechnet werden, dann könnte man, dass setzen, oder einige andere Werte in Ihrem berechneten Objekt

computed: { 
    backgroundImages() { 
    const overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
    return articles.map(article => 'background-image:'+ overlay +' , url(' + articles[0].image.src + ')'); 
    }

und dann:

:style="{ background: backgroundImages[0]}"

Quelle

2017-08-30 12:19:56 user2520818

Aber dann bekomme ich nicht die Überlagerung, die ich für jeden Artikel – Leff

ok einstellen möchte. Aha. Sie könnten auch etwas tun wie: backgroundImages() { const overlay = 'linear-gradient (270deg, rgba (0, 0, 0, .5), rgba (0, 0, 0, .5))'; return articles.map (artikel => 'background-image:' + überlagerung + ', url (' + artikel [0] .image.src + ');') } und dann:: style = "{ background: backgroundImages [0]} " vielleicht hilft das. – user2520818

Aber ich möchte in der Lage sein, viele Hintergrundbilder aus dem Artikelarray zu übergeben, auf diese Weise werde ich nur das Hintergrundbild vom ersten Element des Arrays haben – Leff

Für berechnete Eigenschaft:

computed: { 
    backgroundImage:() => (url) => { 
     let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
     return 'url("' + url + '"), ' + overlay; 
    } 
}

und Methoden:

methods: { 
    backgroundImage(url) { 
     let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
     return 'url("' + url + '"), ' + overlay; 
    } 
}

Nutzung:

:style="{ 'background-image': backgroundImage(articles[0].image.src)}"

Quelle

2017-08-30 12:41:38 talkhabi

Keine der Optionen funktionierte, als ich sie getestet habe – Leff

@Leff Ich habe meine Antwort aktualisiert. Sie verwenden 'rgba (0, 0, 0, .5)' für beide Farbverläufe und dies wird eine einfache flache Farbe ohne Farbverlauf liefern. – talkhabi

Vue 2 - Berechnung berechnet backgroundImage dynamisch

Antwort

Verwandte Themen