react app built by `npm run build` is not loading image source when deployed to App Engince

I have react front end app, which loads logo.png in Header.tsx as img element like below;

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

And directory structure is like this;

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

When I run npm start it will load logo.png as expected, while it won't when I run npm run build and deploy output to Google's App Engine.
enter image description here

As deploy configuration file about App Engine, I have app.yaml like below;

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'

I have checked other related posts about image loading with npm run build and App Engine, but they could not solve my issue. Any help would be really appreciated. Thank you so much in advance!



Read more here: https://stackoverflow.com/questions/67412970/react-app-built-by-npm-run-build-is-not-loading-image-source-when-deployed-to

Content Attribution

This content was originally published by Takuya.N at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: