Comment afficher dynamiquement des images dans Vue.js avec des propriétés calculées et Webpack ?

Affichage d'image dynamique dans Vue.js à l'aide de Webpack

Dans une application Vue.js utilisant Webpack, vous pouvez rencontrer des difficultés lorsque vous tentez de créer dynamiquement afficher des images dont les noms de fichiers sont stockés dans des propriétés calculées. Plus précisément, si ces propriétés dépendent de variables de magasin Vuex remplies de manière asynchrone, vous constaterez peut-être que les chemins d'image ne sont pas résolus correctement.

Considérez le modèle Vue suivant :

<div class="col-lg-2" v-for="pic in pics">
  <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

Bien que cette approche fonctionne parfaitement lorsqu'un chemin d'image statique est fourni (par exemple, ), il ne parvient pas à afficher l'image lorsque le chemin est généré dynamiquement à partir d'un chemin calculé. propriété. Des problèmes similaires ont été signalés et résolus dans ce violon.

Pour résoudre ce problème, vous pouvez utiliser le code JavaScript suivant :

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

Cette fonction utilise require.context() de webpack pour dynamiquement charger des images à partir d'un répertoire spécifique en fonction du nom de fichier fourni.

Dans le modèle HTML, l'attribut v-bind:src doit être mis à jour pour référencer la fonction getImgUrl() au lieu de générer directement le chemin :

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

En implémentant cette solution, vous pouvez afficher dynamiquement des images dans votre application Vue.js avec webpack, même si les noms de fichiers image sont stockés dans des propriétés calculées.

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!