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

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