web-dev-qa-db-fra.com

Les images dynamiques de Vue.js ne fonctionnent pas

J'ai un cas où, dans mon Vue.js avec webpack application Web, je dois afficher des images dynamiques. Je veux montrer img où le nom de fichier des images est stocké dans une variable. Cette variable est une propriété computed qui renvoie une variable de stockage 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 semblable à celui-ci fiddle , mais ici cela fonctionne avec img URL, mais dans le mien avec les chemins de fichiers réels, cela ne fonctionne pas.

Quelle devrait être la bonne façon de le faire?

javascripthtmlvue.jsvuejs2
29
Saurabh

Je travaille 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 je ne sais pas pourquoi mon approche antérieure ne fonctionnait pas.

42
Saurabh

Voici un raccourci que webpack utilisera pour vous éviter d'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 explique pourquoi ça marche? Bien.

Notez que c'est une bonne idée de placer les images de votre animal de compagnie dans un sous-répertoire au lieu de le lober avec tous vos autres éléments d'image. Comme si: ./assets/pets/

13
Grigio

Votre meilleur pari est simplement d’utiliser une méthode simple pour construire la chaîne correcte pour l’image à l’index donné:

methods: {
  getPic(index) {
    return '../assets/' + this.pics[index] + '.png';
  }
}

ensuite, procédez comme 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):

https://jsfiddle.net/q2rzssxr/

8
craig_h

Il existe un autre moyen de le faire en ajoutant vos fichiers image dans un dossier public plutôt que dans des fichiers et d'accéder à ceux-ci sous forme d'images statiques.

<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >

C'est ici que vous devez placer vos images statiques:

 enter image description here

4
Rukshan Dangalla