在 Vercel 上加载图像时出现问题

Question

我在尝试在 Vercel 上托管的登陆页面上加载图像时遇到了一个特殊问题。本地图像显示正确，如下图：

但是，当部署到 Vercel 时，找不到图像。我在 tailwind.config.mjs 文件和 Header.astro 文件中使用两个不同的图像路径。

tailwind.config.mjs 文件：

backgroundImage: {
    'bg-header': "url('./public/img/header/REHeader.jpg')"
},

Header.astro 文件：

<img
    src="../../public/img/header/RE2logo.png"
    class="h-12 w-24"
    alt="Resident Evil Logo"
/>

我部署的最终结果，图像未加载，可以在此处看到。

可以在此处访问 GitHub 存储库！

注意：我使用的是Astro框架！

有人可以帮我理解为什么部署到 Vercel 后图像无法加载吗？我很感谢对此问题的任何指导或解决方案。

Answer 1

根据要求，我正在添加包含一些详细信息的答案

假设您有以下项目结构，（取自 astro

documentaion）

├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └── social-image.png
├── src/
│   └── ...
├── astro.config.mjs
├── package.json
└── tsconfig.json

src 文件夹中的所有代码都会得到优化和编译，而 astro（像许多/大多数工具一样，不会触及您的公共文件夹及其可能包含的任何资产） 通常，您希望将任何图像/资源放入 src 文件夹中，但是如果您不希望编译器处理任何文件，则可以将它们放入公共文件夹中。

构建项目后，astro 将创建如下所示的内容

├── _astro/
│   └── ...
├── index.html
├── robots.txt
└── social-image.png

请注意，

public

文件夹中的所有内容都已与index.html页面一起转储到项目的根目录中。

此外，在您的情况下，由于您已经在公共目录中创建了一个文件夹，astro 将保留该文件夹并将该文件夹按原样复制到项目根目录中。