L'image ne s'affiche pas dans la boucle Vue.js [dupliquer]
J'essaie d'afficher 9 images différentes dans une boucle en utilisant v-for
.
Mais, ils ne sont pas affichés. Si je le montre sans aucune boucle, cela fonctionne.
J'extrait la bonne ressource, mais elle ne s'affiche toujours pas.
C'est mon code:
<img class="list-complete-img" src="../assets/g1.jpg" alt="" /> //This works
<div v-for="item in data.items" :key="item.id">
<div>
{{ item.src }} // Just to check if I am printing right
</div>
<img class="list-complete-img" :src="item.src" :alt="item.src" /> // This does not work
</div>
Maintenant, le résultat que j'obtiens est:
C'est mon data.json
:
"items": [
{ "id": "1", "src": "../assets/g1.jpg", "tags": ["all", "tag1"] },
{ "id": "2", "src": "../assets/g2.png", "tags": ["all", "tag2"] },
{ "id": "3", "src": "../assets/g3.png", "tags": ["all", "tag2"] },
{ "id": "4", "src": "../assets/g4.png", "tags": ["all", "tag1"] },
{ "id": "5", "src": "../assets/g5.png", "tags": ["all", "tag1"] },
{ "id": "6", "src": "../assets/g6.png", "tags": ["all", "tag2"] },
{ "id": "7", "src": "../assets/g7.jpg", "tags": ["all", "tag1"] },
{ "id": "8", "src": "../assets/g8.png", "tags": ["all", "tag2"] },
{ "id": "9", "src": "../assets/g9.png", "tags": ["all", "tag2"] }
]
ÉDITER
Jusqu'à présent, j'ai observé que le problème venait du src
. Si j'utilise un lien d'image, cela fonctionne très bien. Mais pas avec une image locale (uniquement si j'ai utilisé un tas d'images locales dans une boucle et que je fonctionne très bien en single). Donc, ce que je peux faire, c'est mettre le répertoire de fichiers ici. Je recommanderais si quelqu'un d'entre vous peut essayer sur votre ordinateur local et essayer de télécharger des images à partir de votre répertoire de fichiers en boucle et de les publier ici.
RÉSOLU
Il avait besoin de cette déclaration exactement : require
, le chemin d'accès au répertoire et le nom de l'image.
<div v-for="item in items" :key="item.id">
<div>
{{ item.src }}
</div>
<img
class="list-complete-img"
:src="require(`../assets/${item.src}`)"
:alt="item.src"
/>
</div>
Réponses
Ce problème a à voir avec la citation suivante d'Evan You, qui peut être trouvée ici :
Étant donné que l'imagePath n'est rendue par Vue qu'au moment de l'exécution, Webpack n'a aucune chance de le réécrire.
Votre JavaScript
code doit ressembler à ceci :
export default {
name: "App",
data: function () {
return {
items: [
{ id: "1", src: "logo.png", tags: ["all", "tag1"] },
{ id: "2", src: "logo.png", tags: ["all", "tag2"] },
{ id: "3", src: "logo.png", tags: ["all", "tag2"] },
{ id: "4", src: "logo.png", tags: ["all", "tag1"] },
{ id: "5", src: "logo.png", tags: ["all", "tag1"] },
{ id: "6", src: "logo.png", tags: ["all", "tag2"] },
{ id: "7", src: "logo.png", tags: ["all", "tag1"] },
{ id: "8", src: "logo.png", tags: ["all", "tag2"] },
{ id: "9", src: "logo.png", tags: ["all", "tag2"] },
],
};
},
methods: {
getImgUrl: function (imagePath) {
return require('@/assets/' + imagePath);
}
}
};
Ensuite, vous devez appeler votre getImgUrl
fonction en passant le nom du fichier. Vous HTML
serez comme ça :
<div id="app">
<img class="list-complete-img" src="./assets/logo.png" />
<div v-for="item in items" :key="item.id">
<img class="list-complete-img" :src="getImgUrl(item.src)" />
</div>
</div>
Comme je n'ai pas accès à vos images, j'ai pris la liberté d'utiliser le logo Vue comme image.
En résumé, le problème ci-dessus doit faire que lors de la Vue
compilation, il prend tous les actifs et les place dans un autre dossier comme l'image ci-dessous :
Suivez ce modèle et votre exemple fonctionnera également. Prendre plaisir!
EDIT : Si vous le souhaitez, vous pouvez placer vos ressources statiques dans le dossier public. De cette façon, vous pourrez écrire des chemins statiques pour vos actifs.
essaye ça:v-for="(item, i) in items" :key="i"
Pour utiliser des images dynamiques, utilisez require(). Changez ce que vous avez pour cela.
<div id="app">
<div v-for="item in data.items" :key="item.id">
<img ... :src="require(item.src)" />
</div>
</div>
vous pouvez utiliser une boucle for qui peut aider à me corriger si je me trompe