Vue.js img src concaténer variable et texte

Question

Je veux concaténer une variable Vue.js avec l'URL d'une image.

Ce que j'ai calculé :

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

Si je construis pour Android :

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

Else

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

Comment puis-je concaténer la variable calculée avec l'URL ?

J'ai essayé :

<img src="{{imgPreUrl}}img/logo.png">

Answer 1

Vous ne pouvez pas utiliser de boucles (balises moustaches) dans les attributs. Utilisez ce qui suit pour concaténer des données :

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

Ou la version courte :

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

Pour en savoir plus sur les attributs dynamiques, consultez la page Documentation sur Vue .

Answer 2

Dans un autre cas, je suis capable d'utiliser le modèle littéral ES6 avec des backticks, donc pour le vôtre, il pourrait être défini comme :

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

Answer 3

Essayez juste

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

Answer 4

Si vous manipulez ceci à partir de la base de données, essayez :

<img :src="baseUrl + 'path/path' + obj.key +'.png'">

Answer 5

Pour moi, il a dit Module n'a pas trouvé et n'a pas travaillé. Finalement, j'ai trouvé cette solution et ça a marché.

<img v-bind:src="require('@' + baseUrl + 'path/path' + obj.key +'.png')"/>

Il fallait ajouter '@' au début du chemin local.