Vue.js img src verketten Variable und Text

104

Ich möchte die Variable Vue.js mit der Bild-URL verketten.

Was ich berechnet habe:

imgPreUrl : function() {
    if (androidBuild) return "android_asset/www/";
    else return "";
}

Wenn ich für Android baue:

<img src="/android_asset/www/img/logo.png">

Sonst

<img src="img/logo.png">

Wie kann ich die berechnete Variable mit der URL verketten?

Ich versuchte es:

<img src="{{imgPreUrl}}img/logo.png">

javascript vue.js vuejs2

— Ketom
quelle

204

Sie können keine Locken (Schnurrbart-Tags) in Attributen verwenden. Verwenden Sie Folgendes, um Daten zu konkatieren:

<img v-bind:src="imgPreUrl + 'img/logo.png'">

Oder die Kurzversion:

<img :src="imgPreUrl + 'img/logo.png'">

Weitere Informationen zu dynamischen Attributen finden Sie in den Vue-Dokumenten .

— Dan Mindru
quelle

"Aber Vue.js unterstützt tatsächlich die volle Leistung von JavaScript-Ausdrücken in allen Datenbindungen": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

— Alexey

40

In einem anderen Fall kann ich das Vorlagenliteral ES6 mit Backticks verwenden, sodass für Ihr Folgendes Folgendes festgelegt werden kann:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">

— Ardhi
quelle

4

Ich habe dies versucht, aber es scheint, dass Webpack ausgeführt wird, bevor die Bindungen verarbeitet werden, da meine URL als "@. / Assets / syndicate_images / 34.jpg" an den Browser ausgegeben wird

— PrestonDocks

imgPreUrlist eine Variable, keine Funktion.

— Auf Wiedersehen StackExchange

6

Probier's einfach

<img :src="require(`${imgPreUrl}img/logo.png`)">

Erweitern Sie das Snippet

— iliketofu
quelle

schnell und einfach, ty

— Sweet Chilly Philly

1

Wenn Sie dies aus der Datenbank handhaben, versuchen Sie:

<img :src="baseUrl + 'path/path' + obj.key +'.png'">

— Mostafa Ahmed
quelle