部署到 App Engine 时，由“npm run build”构建的反应应用程序未加载图像源答案

【问题标题】：react app built by `npm run build` is not loading image source when deployed to App Engine部署到 App Engine 时，由“npm run build”构建的反应应用程序未加载图像源
【发布时间】：2023-03-27 05:00:02
【问题描述】：

我有 react 前端应用程序，它在 Header.tsx 中加载 logo.png 作为 img 元素，如下所示；

<img className={classes.headerLogo}
     src={'logo.png'}
     alt={"MY_LOGO"}/>

而目录结构是这样的；

├── header
│   ├── Header.tsx
│   └── logo.png

当我运行 npm start 时，它将按预期加载 logo.png，而当我运行 npm run build 并将输出部署到 Google 的 App Engine 时，它不会。

作为关于 App Engine 的部署配置文件，我有app.yaml，如下所示；

runtime: nodejs12

automatic_scaling:
  max_instances: 4
  min_instances: 1

default_expiration: '10d'

handlers:
  - url: /static
    static_dir: build/static
  - url: /(.*\.(json|ico|js|png))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js)$
  - url: /public
    static_dir: public
  - url: .*
    static_files: build/index.html
    upload: build/index.html
    expiration: '0s'

我查看了其他关于使用 npm run build 和 App Engine 加载图像的类似帖子，但它们无法解决我的问题。任何帮助将非常感激。提前非常感谢您！

【问题讨论】：

标签： reactjs typescript google-app-engine npm webpack

【解决方案1】：

我认为问题出在您的 app.yaml 中，在处理程序部分中您有这个：

- url: /(.*\.(json|ico|js|png))$
  static_files: build/\1
  upload: build/.*\.(json|ico|js)$

这里的问题是您正在处理 url 中的 .png 文件，而不是在缺少它的上传值中，如果您将其更改为以下内容，它将修复它：

- url: /(.*\.(json|ico|js|png))$
  static_files: build/\1
  upload: build/.*\.(json|ico|js|png)$

【讨论】：

多么可怜....非常感谢！你的回答像魔术一样解决了我的问题。