Vercel部署Astro项目后图片加载失败问题求助

问题原因 #

Astro框架中，public目录是静态资源的根目录，构建部署后，该目录下的资源会直接映射到站点的根路径（比如/img/xxx）。你当前的路径写法存在两个问题：

• 在Header.astro中使用了../../public/这类相对路径，部署后构建后的文件结构和本地不一致，导致路径指向错误
• 在tailwind.config.mjs中，背景图路径写了./public/，部署后该路径会被解析为相对于CSS文件的路径，但实际静态资源在根路径，所以无法找到

解决方案 #

1. 修改tailwind.config.mjs中的背景图路径 #

将路径改为根路径写法：

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

2. 修改Header.astro中的图片路径 #

去掉../../public前缀，直接使用根路径：

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

修改后重新部署到Vercel即可正常加载图片。

内容的提问来源于stack exchange，提问作者Wesley Moraes