图像未在循环 Vue.js 中显示 [英] Image not displaying in loop Vue.js

问题描述

我正在尝试使用 v-for 循环显示 9 个不同的图像.

但是，它们没有显示.如果我在没有任何循环的情况下显示它，它就可以工作.

我正在提取正确的资源，但仍然无法显示.

这是我的代码:

<div>{{ item.src }}//只是为了检查我是否打印正确

<img class="list-complete-img";:src="item.src";:alt="item.src";/>//这不起作用

现在我得到的结果是:

这是我的data.json:

 物品":[{ "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"] }]

---

编辑

到目前为止，我已经观察到问题出在 src 上.如果我使用图像链接，它工作得很好.但是，不适用于本地图像(仅当我在循环中使用一堆本地图像并且在单个图像中工作正常时).所以，我能做的就是把文件目录放在这里.我建议你们中的任何人是否可以在本地计算机上尝试并尝试循环上传文件目录中的图像并将其发布到此处.

---

已解决

它正好需要这个语句:require，路径目录和图像名称.

<div>{{ item.src }}

解决方案

这个问题与以下 Evan You 的引用有关，可以在

遵循此模式，您的示例也将起作用.享受！

如果需要，您可以将静态资产放置在公共文件夹中.这样，您就可以为您的资产编写静态路径.

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>

解决方案

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.

这篇关于图像未在循环 Vue.js 中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！