Image 图像未在循环Vue.js中显示

我尝试使用

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>

---

编辑

到目前为止，我发现问题在于

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>

{{item.src}

试试这个：

v-for=“（项目，i）in items”：key=“i”

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

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

您的

JavaScript

代码需要如下：

导出默认值{
名称：“应用程序”，
数据：函数（）{
返回{
项目：[
{id:“1”，src:“logo.png”，标签：[“all”，“tag1”]}，
{id:“2”，src:“logo.png”，标签：[“all”，“tag2”]}，
{id:“3”，src:“logo.png”，标签：[“all”，“tag2”]}，
{id:“4”，src:“logo.png”，标签：[“all”，“tag1”]}，
{id:“5”，src:“logo.png”，标签：[“all”，“tag1”]}，
{id:“6”，src:“logo.png”，标签：[“all”，“tag2”]}，
{id:“7”，src:“logo.png”，标签：[“all”，“tag1”]}，
{id:“8”，src:“logo.png”，标签：[“all”，“tag2”]}，
{id:“9”，src:“logo.png”，标签：[“all”，“tag2”]}，
],
};
},
方法：{
getImgUrl:函数（imagePath）{
返回要求（'@/assets/'+imagePath）；
}
}
};

之后，需要通过传递文件名调用

getImgUrl

函数。您的

HTML

如下所示：

由于我无法访问您的图像，因此我冒昧地将Vue徽标用作图像

总之，上面的问题必须解决，当编译

Vue

时，它会获取所有资产并将它们放在另一个文件夹中，如下图所示：

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

---

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

要使用动态图像，请使用require（）。改变你对这个的看法

您可以使用for循环，如果我错了，它可能会帮助纠正我

不，仍然无法工作。问题不在于它没有打印正确的内容。它确实打印正确，但问题是它没有显示IMG，就好像我在单个图像中放置了错误的SRC一样。请在代码上编写代码。是否可能在浏览器上呈现元素并发布屏幕截图时检查元素？控制台中没有任何错误。我已经编辑了这个问题。我希望这个问题可以解决，但是仍然不能解决这个问题。页面一片空白。但是我已经编辑了这个问题，请检查，因为你们我知道问题出在src上。@khemangarg，请您用

items

属性发布

数据

属性好吗？另外，请告诉我data.json的导入位置。实际上，我认为

项

是一个数据属性。我将编辑我的答案。我用

data.items

替换了

items

。托尼·曼，我投票给你了。我对这个有强烈的感觉。你说得对。我只需要在require中添加路径目录，而不是在我的数据中。因此，这方面的代码片段是：{{item.src}../assets/${item.src}）“：alt=“item.src“/>我很高兴你的挑战已经解决，@khemangarg.：）这使我更接近于发现我的问题，data.items并不重要，因为我使用的是单独的data.json文件，而不是在同一个文件中使用它，这就是为什么我这样写的原因。但是我已经编辑了这个问题，请检查，因为你们我知道问题出在src上。@khemangarg我需要你们在浏览器上呈现元素时检查它，并发布一个屏幕截图？编辑和posted@khemangarg我已编辑了对你问题的回答。试试看，让我知道。

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