img source base path for GH pages breaks build

[Rikidink]

Describe the bug
I followed the steps to host statically along with the steps to host on github pages. The yarn build step would always fail due to changing the img source path in components/Image.tsx to the provided one for GH pages deployment.

To Reproduce
Follow section on "Static hosting services" in README.
Follow steps in faq/github-pages-deployment.md.
Run yarn build.

System Info:

• OS: Windows 11
• Node version: 18.17.0
• Npm version: 9.6.7

Additional context
I got it working by changing the img src path to an absolute path where {username} is my Github username and {repo-name} is my repo name:

import NextImage, { ImageProps } from 'next/image'

const Image = ({ src, ...rest }: ImageProps) => (
  <NextImage src={`https://{username}.github.io/{repo-name}${src}`} {...rest} />
)

export default Image