CODEWITHSUNDEEP
reactjsnext.jsdeploymentgithub-actionsgithub-pages
Borzoo Moazami
Borzoo Moazami

Reputation: 1

Images are not loading in next js app deployed on github pages

I wrote an application by nextjs and I wanted to deploy it somewhere to show others what I made. I chose github pages.

I tried to deploy it as I've learned from a couple of blog posts and used github action with the nextjs profile that github provides.

The .yml file that github has created for me, configures my next js application to set the basePath, assetPrefix and also image optimization, therefore I didn't configure anything myself.

The Problem

Now that I've deployed my app on github pages, I can't see my images.

My repo name is "ecommerce-product-page".

When I inspected my requests to see why I couldn't see the images, I noticed the images addresses are uncompleted, like :

https://borzoomv.github.io/images/image-product-1.jpg

but it should be:

https://borzoomv.github.io/ecommerce-product-page/images/image-product-1.jpg

The second url is valid, unlike the other one I won't get 404 and the image will be loaded.

Link to my repo

What I Tried

Now my image import statements are like this:

import sampleImage from '/public/images/sampleImage.jpg'

and when I omit the public from the beginning, I get build error.

Upvotes: 0

Views: 1761

Answers (1)

Marcos
Marcos

Reputation: 69

This is a good article talking about the same issue:

https://xerosource.com/nextjs-images-are-not-loading-in-production/

If that doesn't work then a temporary solution is to use unoptimized

<Image src={sampleImage} unoptimized />

Upvotes: 0

Related Questions