Nextjs not displaying images github-pages

[Neobii]

Link to the code that reproduces this issue

https://github.com/staticStatic/unnuo

To Reproduce

I'm just using npx create-next-app@latest and the next's github deploy to github-pages deploying this, the images don't display on it hosted at the github pages deployment

Current vs. Expected behavior

current

/image

expected

unnuo/image

Provide environment information

github codespaces

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

These are the Next changes I've made

import type { NextConfig } from "next";

const isProd = process.env.NODE_ENV;

const nextConfig: NextConfig = {
    basePath: isProd ? '/unnuo' : "",
    assetPrefix: isProd ? '/unnuo' : "",
    output: "export",  // <=== enables static exports
    reactStrictMode: true,
    images: {
    unoptimized: true, // Optional: Use this if you're hosting images statically
  },
};

export default nextConfig;

export default nextConfig;

[icyJoseph]

Hi,

In this case, you need to add the PAGES_BASE_PATH to the Image, your image is located at /your-github-repo-name/image-path.jpg

<Image src={`${process.env.PAGES_BASE_PATH || ''}/my-image.jpg`} width={200} height={300} alt="..." />

You can see that your image is here: https://staticstatic.github.io/unnuo/next.svg

• https://nextjs.org/docs/app/api-reference/config/next-config-js/assetPrefix

While assetPrefix covers requests to _next/static, it does not influence the following paths:

Files in the public folder; if you want to serve
those assets over a CDN, you'll have to introduce the prefix yourself

[Neobii]

@icyJoseph yeah I can do that, but there should be a certain setting to make it prefix all correctly.

[icyJoseph]

it's because it is in the public folder as the documentation indicates ~ I think you can also do an static image import:

import Image from 'next/image'
import ProfileImage from './profile.png'
 
export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

And not put the image in public ~ then it should work too.