Vue.js img src объединяет переменную и текст

108

Я хочу объединить переменную Vue.js с URL-адресом изображения.

Что я вычислил:

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

Если я построю для Android:

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

Еще

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

Как я могу связать вычисленную переменную с URL-адресом?

Я попробовал:

<img src="{{imgPreUrl}}img/logo.png">
javascript vue.js vuejs2 кетом
источник

Ответы:

208

В атрибутах нельзя использовать завитушки (теги усов). Для объединения данных используйте следующее:

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

Или краткая версия:

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

Подробнее о динамических атрибутах читайте в документации Vue .

Дэн Миндру
источник
«Но Vue.js на самом деле поддерживает всю мощь выражений JavaScript во всех привязках данных»: vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
Алексей
41

В другом случае я могу использовать литерал шаблона ES6 с обратными кавычками, так что для вас это может быть установлено как:

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
Арди
источник
4
Я пробовал это, но похоже, что webpack запускается до обработки привязок, потому что мой URL-адрес выводится в браузер как «@. /
Assets
imgPreUrlэто переменная, а не функция.
Прощай, StackExchange
6

просто попробуй 

<img :src="require(`${imgPreUrl}img/logo.png`)">
Развернуть фрагмент

Иликетофу
источник
быстро и легко, ты
Sweet Chilly Philly
1

если вы получите это из базы данных, попробуйте:

<img :src="baseUrl + 'path/path' + obj.key +'.png'">
Мостафа Ахмед
источник