App Engine标准环境部署React应用后public文件夹图片损坏无法加载

你的app.yaml配置存在2个明确问题，直接导致图片加载异常：

1. YAML语法缩进错误：前两条静态路径规则的缩进层级不统一，static_dir字段比同组的url字段少一个缩进空格，App Engine解析配置时会识别失败，导致/static、/assets路径规则失效。
2. 缺失图片类资源匹配规则：当前配置仅覆盖了json、ico、js后缀的文件，以及/static、/assets路径下的资源。React项目public文件夹内的资源打包后会直接放在build根目录，png、jpg、svg、gif等格式的图片没有对应的匹配规则，会被最后一条全匹配规则拦截，返回index.html的HTML文本内容，这就是你下载到的“损坏文件”的本质。

替换为修正后的app.yaml配置即可：

runtime: nodejs12
service: default
instance_class: F4_1G
handlers:
  - url: /static
    static_dir: build/static

  - url: /assets
    static_dir: build/assets

  # 新增图片、样式等静态资源后缀匹配
  - url: /(.*\.(json|ico|js|png|jpg|jpeg|svg|gif|webp|css))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js|png|jpg|jpeg|svg|gif|webp|css)$

  - url: .*
    static_files: build/index.html
    upload: build/index.html

如果你的图片统一存放在public下的独立目录（比如/images），也可以额外添加专属路径规则，匹配效率更高：

- url: /images
  static_dir: build/images

部署前可先本地检查build目录的资源结构，确认所有资源的路径、后缀都被规则覆盖即可。

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