React应用部署至Vercel后图片加载失败问题排查

既不是Vercel服务器问题，也不是SVG格式本身的问题，核心原因是路径配置或构建产物的资源映射错误，以下是具体分析和解决办法：

可能的原因 #

• 相对路径层级计算错误：本地开发时的目录结构和构建后的产物目录结构不一致，导致三级相对路径../../../images/upload.svg在部署后无法正确定位到资源。
• 构建工具的资源处理逻辑：比如使用Create React App时，src目录内的图片会被webpack处理后输出到build/static/media目录，但如果导入路径层级错误，会导致最终生成的资源URL不正确。

解决办法 #

方案1：改用public目录存放静态资源 #

将upload.svg移动到项目根目录的public/images文件夹下，然后在JSX中直接使用基于public的绝对路径：

<img style={{ marginBottom: '20px' }} src="/images/upload.svg" alt="Upload" />

这种方式无需导入，Vercel部署后会直接从public目录读取资源，路径不会出错。

方案2：修正src内的导入路径 #

• 先确认组件文件相对于src/images的正确层级：比如组件在src/components/Upload/index.js，那么正确的相对路径应该是../../images/upload.svg（而非三级跳转）。
• 更稳妥的方式是配置绝对导入：在项目根目录创建jsconfig.json（TypeScript项目用tsconfig.json）：

  {
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
  }
  

  之后可以直接用根路径导入图片，无需计算相对层级：

  import upload from 'images/upload.svg';
  

方案3：检查Vercel构建配置 #

• 确认Vercel的构建命令为npm run build（Create React App默认），确保构建产物输出到build目录（Vercel默认会部署该目录的内容）。
• 查看Vercel的构建日志，如果有“资源找不到”类的警告，根据提示修正路径或文件位置。

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