CODEWITHSUNDEEP
next.js
Chairil Akbar
Chairil Akbar

Reputation: 71

Images not loading when deploying Next.js on GitHub Pages

I have recently deployed my Next.js application on GitHub Pages. Everything seems to work fine, except for the fact that some images on my website are not loading properly.

The website is located at https://jamalakbara.github.io/bahana/ and the source code can be found at https://github.com/jamalakbara/bahana. When I run the application locally, all images are loading without any issues. However, when I deploy it on GitHub Pages, only some of the images are displayed while others are not.

Has anyone else experienced a similar issue when deploying Next.js on GitHub Pages? How can I resolve this issue and ensure that all images are properly displayed on my website?

I have checked the file paths and made sure that they are correct. I have also tried using different image formats, but the issue still persists.

enter image description here

enter image description here

Upvotes: 5

Views: 1768

Answers (1)

OReilly
OReilly

Reputation: 153

When you make the request for the JS files the path is this: https://jamalakbara.github.io/bahana/_next/static/kOjK2aFcF_hCMAU3ufAGg/_ssgManifest.js

When you make the request for images it's this: https://jamalakbara.github.io/img/logo.png

It should be: https://jamalakbara.github.io/bahana/img/logo.png and if you go to this you'll see that your asset does in fact appear!

Github pages is trying to serve the content from https://jamalakbara.github.io/ for images. We'll need to append the /bahana to every image request.

That can get really tedious so how I would do it is make a file called prefix.ts with the following:

const prefix = process.env.NEXT_PUBLIC_BASE_PATH || '';

export { prefix };

Then everywhere you use Next's Image tag you'd update the source to be:

<Image src={`${prefix}/logo.png`} />

or whatever the name of the image file is.

Upvotes: 6

Related Questions