为啥绑定源时我的图片不显示？

Posted 2023-02-16

【中文标题】为啥绑定源时我的图片不显示？

【英文标题】：Why isn't my image displaying when binding the source?为什么绑定源时我的图片不显示？

【发布时间】：2021-09-15 14:50:52

【问题描述】：

所以我的组件中有一个表格。我想将图像显示为<td>。但是，当我尝试将路径绑定到图像时，它不会显示出来。

当硬编码它工作的路径时，它会很好地显示 gif

<img
src="../assets/banners/01e0a857-95eb-469e-8c86-59a061f32093.gif"

style="width: 200px; height: auto"/>

当我在浏览器中检查它时，它会显示为这样，它出于某种原因改变了路径。

<td><img src="/img/01e0a857-95eb-469e-8c86-59a061f32093.cda90135.gif"  style="width: 200px; height: auto;"></td>

但是当我在下面的示例中进行绑定时，当我在浏览器中检查它时会显示为这样

<td><img src="../assets/banners/01e0a857-95eb-469e-8c86-59a061f32093.gif"  style="width: 200px; height: auto;"></td>

如您所见，路径指向正确的文件夹，就像我硬编码时一样，但它不起作用。

   <tbody class="text-gray-00">
   <tr v-for="item in this.items" :key="item.id">
      <td class="w-1/3 text-left py-3 px-4"> item.itemName </td>
      <td>
         <img
            :src="'../assets/banners/' + item.bannerName + '.gif'"
            
            style="width: 200px; height: auto"
            />
      </td>
      <td class="text-left py-3 px-4">
         <a class="hover:text-blue-500" href="tel:[phone]">622322662</a>
      </td>
      <td class="text-left py-3 px-4">
         <a class="hover:text-blue-500" href="mailto:[e-mail]"
            >[e-mail]</a
            >
      </td>
   </tr>
</tbody>

【参考方案1】：

尝试使用相对路径

:src="require(`@/assets/banners/$item.bannerName.gif`)"

前提是你的 assets 文件夹应该在 src 文件夹中

【讨论】：

目标是能够使用item.bannerName，所以它会是..“图像路径”+item.bannerName，我只使用了一个硬编码值来测试它是否真的找到了图片。

请检查编辑后的答案，看看是否有效！

现在它甚至不会渲染项目

以前是这样吗？

是的，它在这样做之前确实生成了项目，只是没有显示图像