CODEWITHSUNDEEP
reactjsnext.jsgithub-pages
user18022537
user18022537

Reputation: 13

Next.js Github pages loading images problem

I've been trying to load photos and favicon on GitHub pages for a month now and no result at all. Even tried with a boilerplate project from npx create-next-app@latest and it doesn't load the images and favicon from a public folder at all. It's not the path obviously it's something from the configs, I guess, but I can't find a solution; even ChatGPT can't help. Any guidance would be appreciated.

Upvotes: 1

Views: 953

Answers (1)

Sajid
Sajid

Reputation: 11

I had the same problem last time. I was able to figure it out, in my case the images were in Capitalize, and GitHub pages are very sensitive about file names. :

Please go ahead and check the following:

  1. Image extension should be in a small case and exact spell. E.g. jpeg and jpg are not the same, jpg and Jpg are not same, JPG and jpg are not same, etc.
  2. No underscores in path names or names "_".
  3. Try checking the path, proper use of "../" or "./" etc. E.g: src="./next.svg" <Image className={styles.logo} src="./next.svg" alt="Next.js Logo" width={180} height={37} priority />
  4. Wait for some time after deploy
  5. Hard refresh your browser.

I hope this will fix this. :)

Here is my build on github pages: enter image description here

Upvotes: 0

Related Questions