Vue 3 迭代对象数组以显示图像

编程问答 2022-06-02

问题描述

我是 Vue 的新手，在标签上使用 v-for 来显示一组图像时遇到问题。

最初，我使用 13 个 img 标签对一组图像进行硬编码，例如：

<img src="@/assets/cards/AS.png" class="card " alt="AH" />

所有图像都按预期显示。

现在我想遍历一个对象数组，这些对象的“scr”字符串字段指向要使用以下代码显示的 .png 文件：

   <img
      v-for="card in hand.cards"
      :src="card.src"
      :alt="card.name"
      :key="card.name"
      class="card"
   />

v-for 遍历所有卡片对象，但不显示任何图像。相反，占位符图像与 Alt 字段文本一起显示。

为了调试我的问题，我插入了一个显示 card.src 字段的 div。

<div v-for="card in hand.cards">{{ card.src }}</div>

div 显示的所有 card.src 字段与硬编码的 img 标签中显示的完全一样。

您可以在下面的屏幕截图中看到结果。感谢您提供有关如何解决此问题的任何建议。

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptv-forvue.js