Vite + React 项目部署到 Vercel 后图片无法显示，通常源于静态资源路径处理不当：public 目录下的文件必须通过根绝对路径（如 /logo.png）引用，而非相对路径或含 public/ 前缀的错误写法。
vite + react 项目部署到 vercel 后图片无法显示，通常源于静态资源路径处理不当：`public` 目录下的文件必须通过根绝对路径（如 `/logo.png`）引用，而非相对路径或含 `public/` 前缀的错误写法。
在 Vite 构建体系中，public 目录是一个特殊约定——其中的所有文件会在构建时被原样复制到最终输出目录（默认为 dist/）的根路径下，不经过打包、哈希或路径重写。这意味着：
✅ 正确行为：<img src="/serch.png" alt="Vercel 部署中图片资源 404 的根本原因与正确加载方案" > → 浏览器向 https://your-app.vercel.app/serch.png 发起请求，Vercel 边缘网络可直接命中该静态文件；
❌ 错误行为：<img src="public/static/images/serch.png" alt="Vercel 部署中图片资源 404 的根本原因与正确加载方案" > 或 <img src="./static/images/serch.png" alt="Vercel 部署中图片资源 404 的根本原因与正确加载方案" > → 浏览器按当前 HTML 路径解析相对 URL，最终请求如 https://your-app.vercel.app/todoapp/static/images/serch.png（404），因为 public/ 不是 URL 路径的一部分，而是构建时的源目录标识。
✅ 正确配置步骤
1. 规范 public 目录结构
将图片置于 public/ 下层级简洁的位置。例如：
todoapp/ ├── public/ │ ├── serch.png ← 推荐：扁平化，直接放根下 │ ├── logo.svg │ └── images/ ← 若需分类，用子目录（但路径需完整） │ └── icon-check.png ├── src/ │ └── components/ │ └── SearchBar.tsx
2. 在组件中使用绝对路径引用
// ✅ 正确：根绝对路径（/ 开头）
function SearchBar() {
return (
<div className="flex items-center">
<input type="text" placeholder="Search tasks..." />
<img
src="/serch.png"
alt="Search"
className="ml-4 w-6 h-6 cursor-pointer"
/>
</div>
);
}
// ✅ 若图片在 public/images/ 下：
<img src="/images/icon-check.png" alt="Done" />
// ❌ 错误示例（全部会导致 404）：
// src="public/serch.png" → 浏览器尝试请求 /public/serch.png（不存在）
// src="./serch.png" → 相对路径，依赖当前路由上下文（SPA 路由下极易失效）
// src="src/../public/serch.png" → 构建时无效，Vite 不解析此类路径3. 验证 Vercel 输出结构（关键！）
部署后，访问 https://your-app.vercel.app/_vercel/inspect（需登录 Vercel Dashboard）可查看实际部署产物。确认 serch.png 是否位于 dist/ 根目录下——这直接验证 public/ 内容是否被正确拷贝。
⚠️ 常见误区与注意事项
不要混用
public和src/assets：src/assets中的图片需通过import导入（Vite 会返回哈希化 URL），适用于需要构建优化（压缩、转 base64）的场景；而public/适合 favicon、robots.txt、第三方 SDK 的未修改资源。二者不可交叉引用。SPA 路由下路径更敏感：
若你使用createBrowserRouter并配置了basename="/todoapp"，则public/资源仍走根路径/，无需也不应加basename前缀。错误示例：src="/todoapp/serch.png"→ 实际请求/todoapp/serch.png（404）。-
Vercel 缓存可能掩盖问题：
修改图片路径后，若仍 404，请强制刷新（Ctrl+Shift+R）或清除浏览器缓存；也可在vercel.json中临时禁用静态资源缓存用于调试：{ "headers": [ { "source": "/(.*)\.(png|jpg|gif|svg)", "headers": [{ "key": "Cache-Control", "value": "no-cache" }] } ] }
? 总结
Vercel 图片 404 的本质是URL 路径与物理文件位置不匹配。牢记唯一原则：
public/xxx→ 对应 URL/xxx，永远用/开头的绝对路径引用。
删除所有含public/、./、../的src属性值，统一改为/filename.ext，即可 90% 解决该类问题。部署前本地运行npm run build && npx serve -s dist模拟生产环境，可提前发现路径异常。
