Vercel部署网页图片加载失败求助：本地正常线上不显示

问题现象 #

本地用VS Code Live Server托管时图片正常显示，部署到Vercel平台后图片全部无法加载。

排查与解决步骤 #

1. 检查图片引用路径 #

本地Live Server的根目录逻辑和Vercel部署后的网站根目录存在差异：

• 如果本地用的是src/img/xxx.jpg这类指向src目录的路径，部署后要改成绝对路径（比如/img/xxx.jpg），前提是构建后img目录位于网站根目录；
• 纯静态HTML项目要确保路径和当前文件层级匹配，比如页面在src/pages/index.html，图片在src/img，相对路径就写../img/xxx.jpg。

2. 核对文件名大小写 #

Vercel部署环境严格区分文件名大小写，而本地Windows系统不区分：

• 要保证代码里引用的图片文件名，和仓库src/img目录下的实际文件名完全一致（比如header-bg.jpg不能写成Header-Bg.jpg）。

3. 确认构建与部署配置 #

• 如果用了Vite、Webpack这类前端构建工具，检查配置是否正确处理src/img下的资源，确保构建时图片被复制到输出目录；
• 查看Vercel的部署日志，确认图片目录有没有被正常上传，没有遗漏或错误提示。

4. 验证图片可访问性 #

直接在浏览器里访问Vercel上的图片URL（比如/img/your-image.jpg），如果返回404，说明路径配置错了，调整引用路径即可。

效果对比 #

• 本地正常显示效果：
• Vercel部署后图片缺失效果：

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