Comment afficher des images dynamiques dans Vue.js avec Webpack ?

Affichage d'images dynamiques dans Vue.js avec Webpack

Dans les applications Web Vue.js créées avec webpack, l'affichage d'images dynamiques peut être une exigence courante. Cependant, rencontrer des problèmes avec cette fonctionnalité peut être frustrant. Examinons un scénario spécifique et explorons une solution.

Le problème

Dans l'extrait de code fourni, une tentative est faite pour afficher dynamiquement les images stockées dans une image variable. Les images sont récupérées à partir d'une variable du magasin Vuex, qui est renseignée de manière asynchrone sur beforeMount. Cependant, l'affichage dynamique des images ne fonctionne pas, alors que les chemins d'images définis statiquement fonctionnent correctement.

<img v-bind:src="'../assets/' Comment afficher des images dynamiques dans Vue.js avec Webpack ? '.png' " v-bind:alt="Comment afficher des images dynamiques dans Vue.js avec Webpack ?"><br>

La solution

Une approche qui a été trouvée pour résoudre ce problème consiste à tirer parti du chargement dynamique des modules :

<br>getImgUrl(pet) {<pre class="brush:php;toolbar:false">var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")

}

Dans le HTML, le chemin de l'image dynamique peut être accessible en utilisant :

<br><img :src="getImgUrl(Comment afficher des images dynamiques dans Vue.js avec Webpack ?)" v-bind:alt="Comment afficher des images dynamiques dans Vue.js avec Webpack ?"><br>

Cette approche utilise un contexte de module dynamique pour charger des images à partir d'un répertoire spécifié, permettant un affichage dynamique des images.

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!