React doesn't display images placed in public folder when deployed to gh-pages but works in local host, why?

user_10824697 0
Viewed 886

I built a simple app that renders three Cards that contain images in react's public folder. It works in localhost:3000 but when I'm seeking to deploy it to GitHub, gh-pages the images break. It seems it doesn't take the images from the public folder.

Steps I followed to deploy to gh-pages:

  1. created a key, value pair for homepage in package.json and added these two lines in the scripts section

    "predeploy":"npm run build", "deploy":"gh-pages -d build",

  2. npm install gh-pages --save-dev

  3. Committed and pushed all the above changes

  4. npm run deploy

These 4 steps successfully deployed my application

https://sandeep194920.github.io/CompoundComponents/ but, as you can see, the images don't show up which works in the localhost.

Let me know what is the mistake I am making here. Thank you.

react-native reactjs github javascript
1 Answers

The generated HTML will link to the image like this

<p><img alt="" src="/img/image.png" /></p>

But the image will actually be here.

So the issue can be avoided by using the relative paths and it's worth if maybe the repository name should automatically be added before the image URL if it's an absolute path.

Can try the below methods:

![](./img/image.svg)

![](img/image.svg)

<img src="./img/image.svg" />

<img src="img/image.svg" />

I tried it and worked for me check it here

user_117454520
Related