部署后图片无法加载：React + Azure Static Web Apps求助

1. 检查图片路径配置 #

• 确认代码中图片引用用的是相对路径，别用绝对路径（比如/src/assets/image.png本地能跑，部署后路径结构变了就失效）。React项目里要么用import引入图片后使用，要么用./assets/image.png这类相对路径。
• 存在public目录的图片，要用/image.png这种根相对路径，部署后Azure能正确映射到静态资源。

2. 确认部署输出目录配置 #

• 检查package.json里的build命令是否正确把静态文件生成到build目录（React默认输出目录）：

  "scripts": {
    "build": "react-scripts build"
  }
  

• 看Azure流水线任务里的应用位置是不是指向build目录，如果自定义了输出目录，要对应修改。填错的话Azure找不到静态资源。

3. 核对部署日志与控制台报错 #

• 打开Azure门户的Static Web Apps资源，看部署日志里有没有静态资源上传失败的提示。
• 把浏览器控制台里图片请求的完整URL复制出来，和本地开发时的URL对比，看路径是不是多了/少了前缀、目录结构不对。

4. 手动配置静态资源MIME类型 #

• Azure默认能识别常见图片格式的MIME类型，但万一配置异常，就在项目根目录加个staticwebapp.config.json手动指定：

  {
    "mimeTypes": {
      ".png": "image/png",
      ".svg": "image/svg+xml",
      ".gif": "image/gif"
    }
  }
  

• 确保这个配置文件会被包含到部署的输出目录里。

5. 修正回退路由配置 #

• 回退路由是给单页应用路由跳转用的，和图片加载没关系。如果之前的回退路由写成下面这样，会把所有请求（包括图片）都导向index.html，导致404：

  {
    "routes": [
      {
        "route": "/*",
        "serve": "/index.html",
        "statusCode": 200
      }
    ]
  }
  

• 正确写法是先匹配静态资源，再配置回退：

  {
    "routes": [
      {
        "route": "/assets/*",
        "serve": "/assets/{*}"
      },
      {
        "route": "/*",
        "serve": "/index.html",
        "statusCode": 200
      }
    ]
  }
  

6. 清除缓存重新部署 #

• 有时候Azure会缓存旧资源，重新触发一次部署，或者在Azure门户的Static Web Apps资源里找到清除缓存选项，清理后再访问试试。

内容的提问来源于stack exchange，提问作者Joao Victor Simonassi Farias