Images not loading when hosting Next.js application on GitHub Pages

From what I have experimented with Next.js, when you use image optimizations, then paths for images are likely to change (due to Next.js optimizations).

So instead of hardcoding src attribute, you should import it instead:

import portrait from "/portrait.jpg" ... <Image src={portrait} />

Here's example of my Next.js component, that is released here (all images are handled the same).

You can even observe how img element was produced:

<img alt="RSM" loading="lazy" width="357" height="150" decoding="async" data-nimg="1" style="color:transparent" srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frsm.8291421b.png&amp;w=384&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frsm.8291421b.png&amp;w=750&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frsm.8291421b.png&amp;w=750&amp;q=75">

You can test it in your example as well, without releasing anything, just by doing npm run build or equivalent command you defined for building your asssets.

And how it was defined in the source:

<Image height={150} src={rsm} alt="RSM" />