I'm having a fairly well-documented problem, but I have implemented all the solutions I've found, and nothing works. The site is using React. I've wondered if React router dom is causing an issue.
When I built my site for deployment on gh-pages, the images broke locally and online at Open Art Github Pages. Repo here: Open Art Repo
After searching for hours, I fixed the local issue by adding a .env file to my root folder which contains PUBLIC_URL=".". But I have not found a solution to the gh-pages problem. The console logs 404 errors for the images.
The code for the carousel items can be found in: src>components>homeComponenets>CarouselLg.js and CarouselXs.js The code for the logo can be found here: src>components>HeaderComponent.js
Here are the common solutions I have ruled out:
- Case sensitivity in filename and extension. I left one all caps as a test case. But none show up correctly.
- Wrong file path. I'm quite certain this is not the problem because the files load fine locally.
- Removing "/" before path names.
- Making sure there are no "_" in file names.
I'm also getting a manifest.json 404 error in the console.
Let me know what you think.