GitHub pages not finding images and JavaScript files

Question

Working from this template to build a react website with smart contract interactions, I was able to get everything running and appearing smoothly on localhost . All site features worked and images rendered properly, but after building and deploying via npm , the gh-pages site does not appear to have found my image and JS components.

I've tried editing the homepage as seen here , to no avail. I've also gone through the index.html file and tried messing with the scr locations. I'm not sure what's going wrong, and I'm very new to all of this, so any help is appreciated!

GH Repo

GH Site

Edit: Based on comments here, I've updated the relative paths for all images. This fixed the image display issue for some but not all images. CONFIG items are still broken in deploy, even though they work fine on localhost

Answer 1

I have looked into your repo, and the below line is your problem (occurs when your React deployed app is not in the root directory of your domain, but inside a sub folder):

<StyledImg alt={"example"} src={"/config/images/example.gif"} />

When you tacle / you are not in your project repository, but in your GitHub root folder at myusername.github.io , while you should be inside myusername.github.io/my-repo . A good way to overcame this issue is to replace the line above with :

<StyledImg alt={"example"} src=`${process.env.PUBLIC_URL + "/config/images/example.gif"}` />

And put in your package.json the GitHub Page url of your application, like so:

"homepage": "https://jack-baumgartel.github.io/Modern-Abstractions"

Answer 2

I had to dig a little deeper into the config/config.json , and change the src variable from Modern-Abstractions/config/config.json to just config/config.json . Also adding the "homepage" to package.json helped! Thanks all!