Comment puis-je restituer dynamiquement des images dans mon application Vue.js et Webpack ?

Rendu d'image dynamique dans Vue.js avec Webpack

Dans une application Vue.js et webpack, vous pouvez rencontrer des situations où vous devez afficher des images de manière dynamique en fonction de variables . Cependant, si vous rencontrez des problèmes où les images dynamiques ne s'affichent pas correctement, il est important de corriger le problème sous-jacent.

Ce problème survient souvent lorsque vous stockez les noms de fichiers d'images dans une propriété calculée. qui récupère une variable de magasin Vuex remplie de manière asynchrone sur beforeMount. En utilisant la directive v-bind:src, vous avez l'intention de concaténer le nom de fichier dynamique avec un chemin d'actif statique pour créer la source de l'image. Cependant, cette approche peut ne pas toujours donner les résultats souhaités.

Au lieu de cela, une solution plus robuste consiste à exploiter la méthode require.context() de webpack. Cette méthode vous permet d'accéder aux fichiers de répertoires spécifiques en fonction des expressions régulières fournies. Par exemple, vous pouvez utiliser cette méthode pour obtenir tous les fichiers .png du répertoire des actifs.

Pour implémenter cette solution, définissez une méthode dans votre composant Vue.js qui accepte le nom du fichier image comme argument. Dans cette méthode, utilisez require.context pour récupérer le chemin de l'image et le renvoyer. Dans votre modèle HTML, liez l'attribut src de la balise img à cette méthode.

<div class="col-lg-2" v-for="pic in pics">
  <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

getImgUrl(pet) {
  var images = require.context('../assets/', false, /\.png$/)
  return images('./' + pet + ".png")
}

En utilisant la méthode require.context conjointement avec votre méthode dynamique, vous pouvez résoudre efficacement le problème de rendu d'image dynamique dans votre application Vue.js et webpack.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!