Image not displaying in loop Vue.js [duplicate]

Question

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"