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

【问题标题】：Image not displaying in loop Vue.js [duplicate]图像未在循环 Vue.js 中显示 [重复]
【发布时间】：2020-12-06 06:36:30
【问题描述】：

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

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

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

这是我的代码：

<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"] }
  ]

编辑

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

已解决

它需要这个语句：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>

【问题讨论】：

是否可以在元素在浏览器上呈现并发布屏幕截图时对其进行检查？
控制台中没有任何内容，没有错误。只需阅读它，我已经编辑了问题。

标签： image vue.js gallery

【解决方案1】：

此问题与 Evan You 的以下引用有关，可以在 here 找到：

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

您的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在编译的时候，会把所有的assets放到另一个文件夹中，如下图：

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

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

【讨论】：

这让我更接近于发现我的问题，而 data.items 并不重要，因为我使用的是单独的 data.json 文件而不是在同一个文件中使用它，这就是我这样写的原因.但是我已经编辑了问题，请检查一下，因为你们我知道问题出在 src 上。
@khemangarg 我需要您在元素在浏览器上呈现后检查它并发布屏幕截图？
已编辑并发布
@khemangarg 我已经编辑了我对您问题的回答。试试看，让我知道。

【解决方案2】：

试试这个：v-for="(item, i) in items" :key="i"

【讨论】：

不，仍然无法正常工作。问题不在于它没有打印正确的东西。它确实打印正确，但问题是它没有显示 IMG，就好像我把错误的 SRC 放在单个图像中一样没关系。
在 codepen 上写代码

【解决方案3】：

要使用动态图像，请使用 require()。改变你所拥有的。

<div id="app">
    <div v-for="item in data.items" :key="item.id">
        <img ... :src="require(item.src)" />
    </div>
</div>

【讨论】：

我希望这会起作用，但仍然无法使用这个页面完全空白。但是我已经编辑了问题，请检查一下，因为你们我知道问题出在 src 上。
@khemangarg，您能否将您的data 属性与items 属性一起发布？另外，请告诉我你的 data.json 是在哪里导入的。我实际上认为items 是一个数据属性。我将编辑我的答案。我已将items 替换为data.items。
托尼，我投了你一票。我对这个有强烈的感觉=。你是对的要求部分。我需要做的只是在 require 中添加路径目录，而不是在我的数据中。所以代码 sn-p 是：

{{ item.src }}
../assets/${item.src})" :alt="item.src" />
我很高兴你的挑战得到了解决，@khemangarg。 :)

【解决方案4】：

如果我错了，你可以使用 for 循环来帮助纠正我

【讨论】：