Vue.les images dynamiques js ne fonctionnent pas
J'ai un cas où dans mon Vue.js avec l'application web webpack, j'ai besoin d'Afficher des images dynamiques. Je veux montrer img où le nom de fichier des images sont stockés dans une variable. Cette variable est une propriété computed qui renvoie une variable de magasin Vuex, qui est remplie de manière asynchrone sur beforeMount.
<div class="col-lg-2" v-for="pic in pics">
<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>
Cependant, cela fonctionne parfaitement quand je fais juste:
<img src="../assets/dog.png" alt="dog">
Mon cas est similaire à celui-ci fiddle , mais ici, il fonctionne avec L'URL img, mais dans le mien avec les chemins de fichiers réels, il le fait pas de travail.
Quelle devrait être la bonne façon de le faire?
3 réponses
Je l'ai fait fonctionner en suivant le code
getImgUrl(pet) {
var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")
}
Et en HTML:
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>
, Mais ne sais pas pourquoi mon approche précédente n'a pas fonctionné.
Votre meilleur pari est d'utiliser une méthode simple pour construire la chaîne correcte de l'image à l'indice donné:
methods: {
getPic(index) {
return '../assets/' + this.pics[index] + '.png';
}
}
Ensuite, faites ce qui suit dans votre v-for:
<div class="col-lg-2" v-for="(pic, index) in pics">
<img :src="getPic(index)" v-bind:alt="pic">
</div>
Voici le JSFiddle (évidemment les images ne s'affichent pas, donc j'ai mis l'image src à côté de l'image):
Voici un raccourci que webpack utilisera pour que vous n'ayez pas à utiliser require.context.
HTML:
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>
Méthode Vue:
getImgUrl(pic) {
return require('../assets/'+pic)
}
Et je trouve que les 2 premiers paragraphes de ici expliquer pourquoi cela fonctionne? Eh bien.
Veuillez noter que c'est une bonne idée de placer vos photos d'animaux dans un sous-répertoire, au lieu de les placer avec tous vos autres actifs d'image. Comme ça: ./assets/pets/