Vue 在 V-for 中渲染图像答案

【问题标题】：Vue Render Images inside V-forVue 在 V-for 中渲染图像
【发布时间】：2021-04-20 00:08:36
【问题描述】：

我正在尝试在 v-for 中渲染图像，但我只能将其作为字符串捕获。

  <tr
      class="bg-gray-100 border-b border-gray-200"
      v-for="currentView in getDashboard()"
      :key="currentView.id"
    >
      <td class="px-4 py-3">
        <img :src=" {{currentView["avatarUrl"]}}" width="40px" />
      </td>

{{currentView["avatarUrl"]}} 是一个对象，此索引包含头像图像。以这种方式使用 img 标签会显示语法错误。通过其他方式，我如何访问 v-for，对于 img 源标签内的对象。

【问题讨论】：

:src="currentView.avatarUrl"
或 :src=" {{currentView['avatarUrl']}}"
它不工作。什么都没有被渲染。我读到我必须通过一个函数添加要求，但它也不起作用。
对不起。它现在起作用了。真的不知道为什么，但现在以“currentView.avatarUrl”的形式访问它似乎工作正常。非常感谢！
:src="currentView['avatarUrl']"

标签： javascript image vue.js

【解决方案1】：

这是我的建议。对 src 使用 v-bind。我假设头像图像存储在 img 文件夹中。我删除了宽度，因为如果有宽度设置，它似乎不会显示。

<tr
      class="bg-gray-100 border-b border-gray-200"
      v-for="currentView in getDashboard()"
      :key="currentView.id"
    >
      <td class="px-4 py-3">
        <img 
          :src="require(`../img/${currentView.avatarUrl}`)"/>
      </td>

【讨论】：