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
1

jika Anda menangani ini dari dataBase coba:

<img :src="baseUrl + 'path/path' + obj.key +'.png'">
— Mostafa Ahmed
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.