web-dev-qa-db-fra.com

Vue.js img src concaténer variable et texte

Je veux concaténer la variable Vue.js avec l'URL de l'image.

Qu'est-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 concaténer la variable calculée avec l'URL?

Je l'ai essayé:

<img src="{{imgPreUrl}}img/logo.png">
javascriptvue.jsvuejs2
76
ketom

Vous ne pouvez pas utiliser de curlies (balises moustache) dans les attributs. Utilisez les éléments suivants pour concaténer 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 Vue docs .

152
Dan Mindru

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

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

juste essayer

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

Ne fonctionne pas:

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

Mieux

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

...

computed: {
  specificModifierComputed() {
    return `some-class--${specificModifierProp}`;
  }
},
0
ness-EE