2

I have encountered trouble in deploying my react js project on Github.

In short, the javascript in HTML file is working well, but all the images and PDF file I put in the public folder seems unread by the server. Those images and PDF file existed in the BUILD folder but just can't show on the page. The error message for each image in the console is:

[ Failed to load resource: the server responded with a status of 404 () ]

What is the problem you guys suspect that it may be? Is it because I directly quote those images with <img src="/barbell.svg"> so after deploy they can't match the image file name?

Image and PDF in BUILD folder

Github page and error message in the console

Nosaj Chan
  • 21
  • 2

1 Answers1

2

Try using <img src={process.env.PUBLIC_URL + "/barbell.svg"}> if your images are in a public folder.

ouflak
  • 2,458
  • 10
  • 44
  • 49
tannguyen1905
  • 21
  • 3
  • omg, it worked out! Can you please tell me a bit more about why it should be articulate like that? Many thanks to you!!!! – Nosaj Chan Oct 02 '21 at 13:46
  • 2
    The public folder contains static files that Webpack doesn't touch so it's not part of a build, the production build only contains these file's directly copies. Hence, you need to use `process.env.PUBLIC_URL` for the deployment. However, it is a good practice not to store images in public folder, you can see more at https://create-react-app.dev/docs/using-the-public-folder/ – tannguyen1905 Oct 02 '21 at 14:19