我的文件结构是否存在问题导致 Vercel 图像无法加载？

Question

对于一个学校项目，我使用 Vite 和 React 制作了一个快速的待办事项列表。但是，图像不起作用。一般来说，我对 Vercel 或 Vite 不太熟悉，所以我正在寻找解决问题的建议。

是调用函数的问题，还是文件夹路径的问题？

提前谢谢您。

站点链接：https://wads-todo-list-ow2jm6gqw-ushiens-projects.vercel.app 回购链接：https://github.com/FromTheNightJourney/WADSTodoList/tree/main/todoapp

最初，图像位于资源文件夹中。我在这里看到一些线程说将其移动到公共文件夹就是移动，所以我这样做并重新部署。然而，仍然没有解决这个问题。我不确定下一步该做什么。

Answer 1

您没有正确地将图像导入组件中。

注意： 您应该直接在问题中添加更多详细信息，而不是 引导人们访问你的 GitHub 存储库（这会让人们跳过 帮助）。根据您的情况，添加您导入位置的代码 图像。

但是，我查看了您的存储库，发现您的图像导入是错误的。 Vite 有一种处理静态资产的特定方式，如果您决定使用 public Directory 选项，您应该按原样遵循文档。

您正在导入这样的图像：

<img src='public\static\images\serch.png' alt="Search" className="ml-4 w-6 h-6 cursor-pointer" />

但是文档说您需要使用 root 绝对路径 进行引用，即

/serch.png

所以：

1. 为了方便起见，将您的资源直接放入

   public

   文件夹中（您将一些资源放入子文件夹中）。您可以尝试使用

   /static/images/serch.png

   评估它们，但如果不是绝对需要使用子文件夹，为什么要使用它？

2. 使用根绝对路径正确引用源代码中的图像，即

   /serch.png

   （如果在公共文件夹中）或

   /static/images/serch.png

   （如果将它们保存在子文件夹中）

这应该可以解决问题。

您应该再次检查文档以获得完整的清晰度。