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

Issue

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 use / you are not in your project root folder but at myusername.github.io, while you want myusername.github.io/my-repo.

Solution

You can avoid this issue by replacing the above line with this one:

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

And put in your package.json the GitHub Page url, 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!