Vue.js img src değişken ve metni birleştirme

108

Vue.js değişkenini resim URL'si ile birleştirmek istiyorum.

Hesapladığım:

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

Android için oluşturursam:

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

Başka

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

Hesaplanan değişkeni URL ile nasıl birleştirebilirim?

Denedim:

<img src="{{imgPreUrl}}img/logo.png">
javascript  vue.js  vuejs2 
— Ketom
kaynak

Yanıtlar:

208

Özniteliklerde kıvrımlar (bıyık etiketleri) kullanamazsınız. Verileri birleştirmek için aşağıdakileri kullanın:

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

Veya kısa versiyon:

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

Vue belgelerinde dinamik özellikler hakkında daha fazla bilgi edinin .

— Dan Mindru
kaynak
"Ancak Vue.js aslında tüm veri bağlamalarında JavaScript ifadelerinin tam gücünü destekliyor": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
— Alexey
41

Başka bir durumda, ES6 şablonunu backticks ile kullanabilirim, bu nedenle sizinki için şu şekilde ayarlanabilir:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
— Ardhi
kaynak
4
Bunu denedim, ancak görünen o ki, web paketim bağlamalar işlenmeden önce çalışıyor çünkü benim url’m tarayıcıya "@. / Assets / syndicate_images / 34.jpg" olarak çıktı
— PrestonDocks
imgPreUrlbir değişkendir, işlev değil.
— Hoşçakal StackExchange
1

Bunu dataBase'den alırsanız şunu deneyin:

<img :src="baseUrl + 'path/path' + obj.key +'.png'">
— Mostafa Ahmed
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.