部署至Vercel后图片无法加载问题求助

核心原因 #

本地开发正常但Vercel部署后图片失效，核心是静态资源路径的构建处理逻辑差异：

• 本地开发时（比如Vite Dev Server），../assets这类相对路径能被开发服务器正确映射到源文件位置，import.meta.url指向开发环境下的模块URL，拼接后的路径能准确找到图片。
• 部署到Vercel后，项目经过构建打包，模块文件会被放到特定目录（比如dist/assets/js/），此时../assets拼接后会指向错误层级（比如dist/assets/assets/projects/...）；同时手动拼接的路径不会被构建工具（如Vite）识别，无法生成带哈希的正确资源路径，最终导致Vercel上找不到对应图片。

可行解决方案 #

方案1：让构建工具自动处理资源路径（推荐，适配Vite等工具） #

使用import.meta.glob批量导入所有项目图片，让构建工具在打包时自动处理路径和资源哈希：

// 批量导入所有项目下的png图片，eager设为true表示立即加载
const projectImages = import.meta.glob('../assets/projects/**/*.png', { eager: true, import: 'default' });

// 修改getImgSrc函数
const getImgSrc = (src:string, name:string) => {
  // 拼接对应图片的相对路径
  const imgPath = `../assets/projects/${name}/${src}.png`;
  // 返回构建后处理好的图片URL
  return projectImages[imgPath];
};

这样Vite会在构建时自动识别这些图片资源，复制到正确输出目录并生成带哈希的有效URL，部署到Vercel后即可正常访问。

方案2：使用public目录存放静态资源 #

将assets/projects目录移动到项目根目录的public文件夹下（无则新建），然后直接使用根相对路径访问：

const getImgSrc = (src:string, name:string) => {
  // 用根路径直接指向public下的资源
  return `/assets/projects/${name}/${src}.png`;
};

public目录下的资源会在构建时原封不动复制到输出目录的根目录，根相对路径在任何部署环境下都能准确指向资源位置。

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