La fonction d'affichage dynamique d'image de Vue.js échoue

Question

Je suis débutant avec vue.js et j'essaie d'afficher dynamiquement des images mais j'ai des problèmes avec l'affichage dynamique, si je les modifie manuellement, elles fonctionnent correctement. J'ai trouvé de nombreuses questions similaires avec quelques différences et aucune d'entre elles ne m'a aidé.

Voici ma structure :

-src
  --actifs
    ---pizza
      ----pizza-1.jpg
      ----pizza-2.jpg
    ---Hamburger
      ----hamburger-1.jpg
      ----hamburger-2.jpg
    ---frites
      ----frites-1.jpg
      ----frites-2.jpg
 --Composants
 --DBjson
   ---main.json

J'essaie de créer cette boucle :

`<div class="holder" v-for="restaurant dans les restaurants">
  <img :src="getImage(restaurant.name, restaurant.mainImage)"/>
 </div>

  exporter par défaut {
nom : "restaurant",
données() {
    retour {
        restInfo : this.$attrs.restData,
    } ;
},
méthodes : {
    getImage (nom du dossier, nom de l'image) {
        let image = require.context("@/assets/");
        return image("./" + nom du dossier + "/" + nom de l'image);
    },
 },
};`

Mon fichier JSON :

{
    "identifiant": 1,
    "nom": "pizza",
    "prix": "10$",
    "mainImage": "pizza-1.jpg",
    "images": ["pizza-2.jpg", "pizza-1.jpg"],
},

Answer 1

getImage devrait demander et renvoyer une image en utilisant son chemin de fichier relatif complet

Vue 2.x

getImage(folderName, imageName) {
  return require(`@/assets/${folderName}/${imageName}`)
}

Vue 3.x + Vite

Pour autant que je sache, Vite ne peut pas gérer l'alias '@' pour cette tâche spécifique, alors assurez-vous de définir vos chemins selon vos besoins

getImage(folderName, imageName) {
  return new URL(`../assets/${folderName}/${imageName}`, import.meta.url).href;
}