npm run build打包的React应用部署到App Engine后无法加载图片资源

1 静态资源引用方式错误 #

你当前直接写src={'logo.png'}的引用方式仅在开发环境生效：

• 和组件同目录的logo.png属于源码内资源，直接写相对路径不会被webpack识别为依赖，打包时不会被输出到build目录下
• 开发服务会临时处理同目录静态资源的加载，因此本地运行正常，打包后丢失

修正方案 #

在Header.tsx顶部导入图片资源，webpack会自动将其打包到构建产物的静态资源目录并生成正确的访问路径：

// 顶部导入
import logo from './logo.png'

// 改写img标签
<img className={classes.headerLogo}
     src={logo}
     alt="MY_LOGO"/>

2 app.yaml 静态资源规则配置错误 #

你当前配置的第二条handler规则存在遗漏：

• url匹配规则包含了.png后缀，但upload字段的正则仅允许上传json|ico|js格式的文件，png文件部署时根本不会被上传到GAE的静态资源服务

修正方案 #

修改app.yaml中第二条handler的upload规则，补全png后缀，建议同时补全其他常用静态资源后缀避免后续同类问题：

handlers:
  # 其他规则保持不变
  - url: /(.*\.(json|ico|js|png|jpg|jpeg|gif|css|svg))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js|png|jpg|jpeg|gif|css|svg)$

完成上述两处修改后重新执行npm run build再部署到GAE即可正常加载图片。

内容的提问来源于stack exchange，提问作者Takuya.N