<p>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é. </p> <p>Voici ma structure : </p> <pre class="brush:php;toolbar:false;">-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</pre> <p>J'essaie de créer cette boucle : </p> <pre class="brush:php;toolbar:false;">`<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); }, }, };`</pre> <p>Mon fichier JSON : </p> <pre class="brush:php;toolbar:false;">{ "identifiant": 1, "nom": "pizza", "prix": "10$", "mainImage": "pizza-1.jpg", "images": ["pizza-2.jpg", "pizza-1.jpg"], },</pré>

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

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