Comment afficher dynamiquement des images dans les applications Vue.js avec Webpack ?

Affichage d'images dynamiques dans les applications Vue.js avec Webpack

Dans les applications Vue.js, le rendu d'images dynamiques peut s'avérer difficile lorsque les images sont stockées dans des variables et accessibles via un fichier chemins. Pour surmonter ce problème, les développeurs rencontrent généralement des problèmes lors de l'utilisation de v-bind:src avec des valeurs calculées qui récupèrent les noms de fichiers image.

Méthode originale :

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

Problème :

Cette approche ne rend pas les images dynamiques lorsque le nom du fichier image est stocké dans un variable.

Solution :

Pour résoudre ce problème, une méthode personnalisée getImgUrl peut être définie pour récupérer dynamiquement l'URL de l'image et la lier à l'attribut src de l'élément img .

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

<!-- HTML -->
<img :src="getImgUrl(pic)" v-bind:alt="pic">

Pourquoi la méthode originale Échec :

La méthode d'origine a échoué car Vue.js n'a pas pu résoudre dynamiquement la chaîne du chemin du fichier. La fonction require.context permet à Vue d'accéder aux actifs statiques au sein de l'application, faisant de la méthode getImgUrl une solution plus fiable.

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!