Vue.js img src menggabungkan variabel dan teks

106

Saya ingin menggabungkan variabel Vue.js dengan URL gambar.

Apa yang saya hitung:

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

Jika saya membangun untuk android:

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

Lain

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

Bagaimana cara menggabungkan variabel yang dihitung dengan URL?

Saya mencobanya:

<img src="{{imgPreUrl}}img/logo.png">
javascript vue.js vuejs2 ketom
sumber

Jawaban:

206

Anda tidak dapat menggunakan curlies (tag kumis) dalam atribut. Gunakan yang berikut ini untuk menggabungkan data:

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

Atau versi singkatnya:

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

Baca lebih lanjut tentang atribut dinamis di dokumen Vue .

Dan Mindru
sumber
"Tapi Vue.js sebenarnya mendukung kekuatan penuh ekspresi JavaScript di dalam semua pengikatan data": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
Alexey
40

Dalam kasus lain saya bisa menggunakan template literal ES6 dengan backticks, jadi untuk Anda bisa disetel sebagai:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
Ardhi
sumber
4
Saya telah mencoba ini, tetapi tampaknya webpack berjalan sebelum pengikatan diproses karena url saya dikeluarkan ke browser sebagai "@. / Assets / syndicate_images / 34.jpg"
PrestonDocks
imgPreUrladalah variabel, bukan fungsi.
Selamat tinggal StackExchange
6

coba saja 

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

iliketofu
sumber
cepat dan mudah, ty
Sweet Chilly Philly
1

jika Anda menangani ini dari dataBase coba:

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