Vue.js img src concaténer la variable et le texte

106

Je veux concaténer la variable Vue.js avec l'URL de l'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">

Autre

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

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

Je l'ai essayé:

<img src="{{imgPreUrl}}img/logo.png">
javascript vue.js vuejs2 ketom
la source

Réponses:

206

Vous ne pouvez pas utiliser de curlies (balises moustache) dans les attributs. Utilisez ce qui suit pour concater des données:

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

Ou la version courte:

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

En savoir plus sur les attributs dynamiques dans la documentation Vue .

Dan Mindru
la source
"Mais Vue.js prend en charge toute la puissance des expressions JavaScript dans toutes les liaisons de données": vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
Alexey
40

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

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
Ardhi
la source
4
J'ai essayé cela, mais il semble que le webpack fonctionne avant que les liaisons ne soient traitées car mon URL est sortie dans le navigateur sous le nom "@. / Assets / syndicate_images / 34.jpg"
PrestonDocks
imgPreUrlest une variable, pas une fonction.
Au revoir StackExchange
6

essaie juste 

<img :src="require(`${imgPreUrl}img/logo.png`)">
Développer l'extrait

iliketofu
la source
rapide et facile, ty
Sweet Chilly Philly
1

si vous gérez cela depuis dataBase, essayez:

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