Vue.js img src łączy zmienną i tekst

106

Chcę połączyć zmienną Vue.js z adresem URL obrazu.

Co obliczyłem:

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

Jeśli zbuduję dla Androida:

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

Jeszcze

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

Jak mogę połączyć obliczoną zmienną z adresem URL?

Próbowałem tego:

<img src="{{imgPreUrl}}img/logo.png">
javascript vue.js vuejs2 ketom
źródło

Odpowiedzi:

206

W atrybutach nie można używać curlies (tagów wąsów). Aby połączyć dane, użyj następujących poleceń:

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

Lub krótka wersja:

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

Przeczytaj więcej o atrybutach dynamicznych w dokumentacji Vue .

Dan Mindru
źródło
„Ale Vue.js w rzeczywistości obsługuje pełną moc wyrażeń JavaScript we wszystkich powiązaniach danych”: vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
Alexey
40

W innym przypadku jestem w stanie użyć literału szablonu ES6 z znakami wstecznymi, więc dla twojego można ustawić jako:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
Ardhi
źródło
4
Próbowałem tego, ale wygląda na to, że pakiet webpack działa przed przetworzeniem powiązań, ponieważ mój adres URL jest wysyłany do przeglądarki jako „@. / Asset / syndicate_images / 34.jpg”
PrestonDocks
imgPreUrljest zmienną, a nie funkcją.
Goodbye StackExchange
6

Spróbuj 

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

iliketofu
źródło
szybko i łatwo, ty
Sweet Chilly Philly
1

jeśli sprzedasz to z dataBase, spróbuj:

<img :src="baseUrl + 'path/path' + obj.key +'.png'">
Mostafa Ahmed
źródło