Why do I lose my images when I deploy my react app to gh-pages?

Question

My react site is deployed on gh-pages at: https://efraimkrug.github.io/nehiezra/

When I use firefox to "inspect element" of the (2) pictures that do not show, it shows me the directory (without the base).

If I "copy link" and put it in the another browser tab - the copy grabs also the base and i see the picture!

If you know of any places where I can find more information on how react and gh-pages treat their links and base directory structures, I would very much appreciate it.

Thanks.

Answer 1

I believe you have hardcoded the image path by yourself. Try using the below path for quick workaround.

images/RebNehemiaSmall.jpeg

Alternatively and ideally, you can put image somewhere in your src folder, import in the component, and use the reference in the src attribute of img tag as below.

import myImage from './../somepath/RebNehemiaSmall.jpeg';
...
...
<img src={myImage} alt="My Image" />

Also, don't miss to set the document base url since you are deploying to a subdirectory. Please check this if you are not aware about it.