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

Я хочу объединить переменную 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">

Ответы

Ответ 1

Вы не можете использовать завитки (метки усов) в атрибутах. Используйте следующие данные для concat:

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

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

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

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

Ответ 2

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

<img v-bind:src="`${imgPreUrl()}img/logo.png`">

Ответ 3

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

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

Ответ 4

Не работает:

<div :class="['some-class', someClassNameProp, { 'some-class--${specificModifierProp}': showSomethingSpecificProp }]" >

Лучше

<div :class="['some-class', someClassNameProp, showSomethingSpecificProp ? specificModifierComputed : '']" >

...

computed: {
  specificModifierComputed() {
    return 'some-class--${specificModifierProp}';
  }
},