React项目部署后静态图片路径拼接路由前缀无法加载怎么办

该问题的核心触发点是静态资源公共路径（publicPath/base）配置与部署场景不匹配，结合客户端路由的路径解析规则导致：

1. 本地开发环境下，构建工具的dev server默认将资源公共路径设为域名根路径/，所有静态资源引用都会被自动转为绝对路径，直接从根目录解析资源，不会出现路径拼接错误。
2. 生产打包时如果没有显式指定资源公共路径为绝对根路径，打包产物里的资源引用会变成相对路径（比如./static/media/myImage.svg）。浏览器解析相对路径时，会以当前页面的URL路径作为基准：当你访问/about路由时，就会把资源路径拼接为/about/static/media/myImage.svg，自然无法找到对应文件。
3. 如果使用React Router的BrowserRouter模式但没给服务器配置路由回退规则，会进一步放大这个问题，服务器会把子路由请求当成真实的文件路径处理，进一步导致资源路径解析错乱。

根据你的项目构建工具和部署场景，选对应方案修复即可：

1. 修正构建工具的资源公共路径配置 #

这是最根本的解决方法，保证打包后的资源引用是正确的绝对路径：

• 如果你用Create React App（CRA）脚手架创建的项目：
  在项目根目录的package.json中添加如下配置，指定站点根路径：

  {
    "homepage": "/"
  }
  

  如果你的站点是部署在域名的子目录下（比如http://remoteserver.com/my-app/），就把homepage的值改成对应子路径即可。
• 如果你自定义配置Webpack：
  在Webpack配置的output字段中，将publicPath设为根路径：

  module.exports = {
    output: {
      publicPath: '/',
      // 其余原有output配置
    }
  }
  

• 如果你用Vite作为构建工具：
  在vite.config.js中，将base配置项设为根路径：

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    base: '/',
    // 其余原有配置
  })
  

2. 配置服务器路由回退规则 #

如果项目用了BrowserRouter做客户端路由，必须给服务器配置回退规则：所有路径的请求都统一返回入口index.html文件，交给前端路由处理页面渲染，避免服务器把前端路由当成真实文件路径解析。
以最常用的Nginx配置为例：

server {
  listen 80;
  server_name remoteserver.com;
  root /你的项目打包产物dist目录路径;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

3. 临时兼容方案（不推荐长期使用） #

如果暂时无法修改构建配置，可以把图片放到项目的public目录下，直接通过根绝对路径引用，绕开打包时的相对路径处理：

// 图片放在public/myImage.svg路径下
<img src="/myImage.svg" alt="示例图片" />

注意：该方案属于硬编码路径，后续如果部署子目录、开启资源hash缓存时容易出现兼容问题，优先使用前两种方案。

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