Les images dynamiques de Vue.js ne fonctionnent pas

Question

J'ai un cas où, dans mon Vue.js con webpack J'ai besoin d'afficher des images dynamiques. Je veux afficher img où les noms de fichiers des images sont stockés dans une variable. Cette variable est un computed qui renvoie un Vuex qui est alimentée de manière asynchrone sur le site de l'entreprise. 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 le fais :

<img src="../assets/dog.png" alt="dog">

Mon cas est similaire à celui-ci violon Mais ici, cela fonctionne avec l'URL de l'image, alors que dans le mien, avec les chemins de fichiers réels, cela ne fonctionne pas.

Quelle est la meilleure façon de procéder ?

Answer 1

J'ai réussi à le faire fonctionner avec le code suivant

  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 précédente n'a pas fonctionné.

Answer 2

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 dans aquí expliquer pourquoi cela fonctionne-t-il ? bien.

Veuillez noter qu'il est préférable de placer les photos de vos animaux dans un sous-répertoire, plutôt que de les placer avec toutes vos autres images. Par exemple : ./assets/pets/

Answer 3

Il existe un autre moyen de le faire en ajoutant vos fichiers d'images au dossier public au lieu des actifs et en y accédant en tant qu'images statiques.

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

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

Answer 4

Votre meilleure chance est d'utiliser une méthode simple pour construire la chaîne de caractères correcte pour l'image à l'index donné :

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

puis 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, j'ai donc mis l'image src à côté de l'image) :

https://jsfiddle.net/q2rzssxr/

Answer 5

Essayez d'importer l'image comme ceci, car Webpack devrait connaître sa dépendance.

    <ul>
              <li v-for="social in socials" 
              v-bind:key="social.socialId"
              >

                <a :href="social.socialWeb" target="_blank">
                  <img class="img-fill" :id="social.socialId" :src="social.socialLink" :alt="social.socialName">
                </a>
              </li>

            </ul>

<script>
        import Image1 from '@/assets/images/social/twitter.svg'
        import Image2 from '@/assets/images/social/facebook.svg'
        import Image3 from '@/assets/images/social/rss.svg'
        export default {
          data(){
            return{
              socials:[{         
                   socialId:1,         
                   socialName: "twitter",
                   socialLink: Image1,
                   socialWeb: "http://twitter.com"
              },
      {
          socialId:2,
          socialName: "facebook",
           socialLink: Image2,
           socialWeb: "http://facebook.com"

      },
      {
          socialId:3,
          socialName: "rss",
           socialLink: Image3,
           socialWeb: "http://rss.com"
      }]

 </script>