Pourquoi le chargement dynamique des images échoue-t-il avec Vue.js et Webpack ?

Problèmes de chargement d'images dynamiques dans Vue.js avec Webpack

Lors de la création d'applications Web avec Vue.js et Webpack, l'affichage d'images dynamiques peut parfois posent des défis. Un scénario courant est celui où les noms de fichiers image sont stockés dans une variable et doivent être ajoutés à un chemin de base pour générer une source d'image complète.

Un développeur a rencontré un problème où le code suivant, destiné à afficher dynamiquement les images basé sur une propriété calculée, a échoué :

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

Fait intéressant, une approche similaire utilisant un chemin d'image statique a fonctionné comme prévu :

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

Le casse-tête résidait dans la différence entre les deux approches . L'utilisation d'un chemin statique demande directement à Webpack d'inclure l'image dans la build, garantissant ainsi sa disponibilité au moment de l'exécution. Cependant, l'approche dynamique repose sur le chemin de l'image généré au moment de l'exécution, ce que Webpack ne peut pas anticiper pendant le processus de construction. Par conséquent, l'image n'est pas incluse dans le bundle, ce qui entraîne un fichier manquant.

Pour résoudre ce problème, le développeur s'est tourné vers la méthode require.context(), qui permet de charger dynamiquement des modules ou des fichiers. dans un contexte précis. En utilisant le code suivant :

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

et en mettant à jour le code HTML comme suit :

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

le développeur a obtenu l'effet souhaité. require.context() leur a permis de charger dynamiquement le fichier image en fonction de la valeur de la propriété pic, et Webpack a inclus l'image requise dans le bundle.

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!