图像未在循环 Vue.js 中显示[重复]

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

但是，他们没有表现出来。如果我在没有任何循环的情况下显示它，它就可以工作。

我正在提取正确的资源，但它仍然不会显示。

这是我的代码：

<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>

现在我得到的结果是：

这是我的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

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

SOLVED

它正是需要这样的声明：require、路径目录和图像名称。

<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>

这个问题与 Evan You 的以下引用有关，可以找到here:

因为 imagePath 仅由 Vue 在运行时渲染，所以 Webpack 没有机会重写它。

Your JavaScript代码需要是这样的：

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);
    }
  }
};

之后，您需要致电您的getImgUrl通过传递文件名来实现函数。你的HTML会是这样的：

<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>

由于我无法访问您的图像，因此我擅自使用 Vue 徽标作为图像。

综上所述，上述问题必须做到以下几点：Vue编译时，它会获取所有资源并将它们放入另一个文件夹中，如下图所示：

遵循这个模式，你的例子也会起作用。享受！

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