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

Antworten:

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