Set up package.json to preform a build to Github and now img links are breakilng

So I was working on a Front-End project and needed to get it to a public URL so I created a build that points to my master branch on Github and now my links are breaking.

The code is in this repository: GitHub - trrapp12/React-Travel-Journal

The code can be seen displayed at: T.Rapp Travel Journal

What I did right before everything broke:

  1. ran a npm install gh-pages --save-dev on my command line.

  2. added "homepage": "https://trrapp12.github.io/React-Travel-Journal", to my package.json

  3. added "predeploy": "npm run build", "deploy": "gh-pages -b master -d build", to my scripts in my package.json

  4. ran a git remote add origin https://github.com/trrapp12/React-Travel-Journal.git

  5. went to Settings > Pages > Source and changed my Github build from the main branch to the master

I can see from Github that my main is 15 commits behind my master. Thinking that might be it. I did try doing a git pull origin main followed by a git push origin master. But that didn’t fix it.

Where the localhost that would run with an npm run start showed the pictures before hand, I was thinking it probably wouldn’t be a simple file referencing issue with the src attribute. But maybe I’m wrong.

Am I looking at a git issue where I need to get both branches on the same commits, because the pre-build lives on main and the post build lives on master, so I would think it would be normal if they weren’t the same. Or do I need to do a rebase? This is all just my stuff, so I’m not corroborating with anyone else.

Anyway, it’s late and I’m in a bit over my head. Any suggestions would help.