怎样在 Vercel 上正确显示静态图片资源

Vercel 部署时图片无法显示，通常是因为静态资源未按其约定目录结构存放；将图片统一放入 public 文件夹，并在 HTML 中使用根路径（如 /image.png）引用，即可解决。

Vercel 部署时图片无法显示，通常是因为静态资源未按其约定目录结构存放；将图片统一放入 `public` 文件夹，并在 HTML 中使用根路径（如 `/image.png`）引用，即可解决。

vercel 对静态资源有明确的目录规范：所有前端静态文件（如图片、css、js、字体等）必须放在项目根目录下的 public 文件夹中，vercel 会自动将其映射到站点根路径 / 下。这意味着你不能将图片放在 static/、assets/ 或其他自定义目录下——即使本地 flask 开发服务器能正常访问，vercel 也不会识别这些路径。

✅ 正确做法：

1. 将图片（如 logo.png, banner.jpg）全部移入 public/ 目录（例如：public/logo.png）；
2. 在 HTML 中使用绝对路径引用，省略 public 前缀：

<!-- ✅ 正确：Vercel 会从 / 路径服务 public/ 下的文件 --><img src="/logo.png" alt="Logo"><img src="/images/photo.jpg" alt="Photo"> <!-- 若 public/images/photo.jpg -->

❌ 常见错误：

<!-- ❌ 错误：Vercel 不识别 public/ 前缀，且无 public 目录映射规则 --><img src="public/logo.png"><!-- ❌ 错误：相对路径在单页应用或路由变化时易失效 --><img src="./assets/logo.png"><!-- ❌ 错误：Flask 的 static 目录对 Vercel 无效（Vercel 不运行 Flask 后端） --><img src="{{ url_for('static', filename='logo.png') }}">

⚠️ 重要注意事项：

• Vercel 默认以 静态站点模式（Static Site Generation） 部署纯 HTML/JS/CSS 项目；如果你使用 Flask，需改用 Serverless Functions 或切换为 [Vercel + Next.js/Remix 等支持 SSR 的框架]，否则 Flask 的路由和 static/ 目录完全不生效；
• 文件名区分大小写（Logo.png ≠ logo.png），请确保路径拼写与实际文件一致；
• 首次部署后，可访问 https://your-domain.vercel.app/logo.png 直接测试图片 URL 是否可访问，快速定位路径问题；
• 清除浏览器缓存或使用无痕窗口验证，避免因旧缓存导致“看似不生效”。

总结：Vercel 的静态资源服务机制与本地开发服务器（如 Flask 的 static）不同，public 是唯一被自动托管的静态资源入口目录。统一归置 + 根路径引用，是解决图片不显示最根本、最可靠的方式。