gpt4 book ai didi

图像不在循环 Vue.js 中显示

转载 作者:行者123 更新时间:2023-12-05 02:05:34 26 4
gpt4 key购买 nike

<分区>

我正在尝试使用 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>

现在我得到的结果是:

This is the snippet I am receiving

这是我的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 上。如果我使用图像链接,它工作得很好。但是,不适用于本地镜像(仅当我在循环中使用一堆本地镜像并且在单个图像中工作得很好时)。所以,我能做的就是把文件目录放在这里。如果你们中的任何人都可以尝试在本地计算机上循环上传文件目录中的图像并张贴在这里,我会推荐。

File Directory

Inspect Element as required


已解决

它恰好需要这个语句: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>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com