Image not displaying in loop Vue.js [duplicate] - image

Question

This question already has answers here:
Vue.js dynamic images not working
(20 answers)
Closed 2 years ago.
I am trying to display 9 different images in a loop using v-for.
But, they are are not showing. If I show it without any loop, it works.
I am extracting the right resource but, still, it won't display.
This is my 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>
Now the result that I am getting is:
This is my 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"] }
]
EDIT
So far, I have observed that the problem lies with the src. If I am using an image link, it is working just fine. But, not with a local image(only if I used bunch of local images in a loop and working just fine in single). So, what I can do is put the file directory here. I would recommend if anyone of you can try on your local computer and try to upload images from your file directory in a loop and post it here.
SOLVED
It needed this statement exactly: require, the path directory and image name.
<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>

Answer 1

This is issue has to do with the following quote of Evan You, which can be found here:
Because the imagePath is only rendered by Vue at runtime, Webpack has no chance of rewriting it.
Your JavaScript code needs to be like this:
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);
}
}
};
Afterwards, you need to call your getImgUrl function by passing the filename. Your HTML will be like this:
<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>
Since I do not have access to your images, I have taken the liberty to use the Vue logo as an image.
In summary, the above problem has to do that when Vue compiles, it takes all the assets and puts them in another folder like the image below:
Follow this pattern and your example will also work. Enjoy!
EDIT: If you want, you can have your static assets placed in the public folder. In that way, you will be able to write static paths for your assets.

Answer 2

try this: v-for="(item, i) in items" :key="i"

Answer 3

you can use a for loop which may help correct me if I am wrong

Answer 4

To use dynamic images, use require(). Change what you have to this.
<div id="app">
<div v-for="item in data.items" :key="item.id">
<img ... :src="require(item.src)" />
</div>
</div>