Using absolute path in img src solves my problem, but the reason causing original problem is unknown.

I add a custom prefix to NEXT routing, and I didn't use NEXT/IMG to render profile photo. I guess it's the reason why img src attribute doesn't change according to Next path prefix config.

Original Question

I am creating my first online portfolio using Next + React, and then published to github pages. There is one photo in the portfolio homepage.

• When I first visit the page, the photo rendered correctly
• but if navigate to other same-site pages, and then would like to visit homepage again by clicking site logo, which is a Next/Link point back to home page. The photo is not rendered
• there is a floating button on bottom-right corner using the same photo, it always rendered correctly
• Github Repo: main branch is the active branch
• warning: my code is definitely structured horribly. It might hurt your eyes ...

my profile picture is named Avatar.png stored in public folder

this is where the code is returning my profile photo

// components/about.js
<div className={styles['avatar-container']}>
    <img className={styles['avatar-img']} src='Avatar.png' width="188px" height="196px" alt="a picture of Yu-Ming"></img>
</div>

// about.js is a react component imported to pages/index.js

I notice that there is additional '/' appended to the end of url when first visit

• first visit: https://yumingchang1991.github.io/personal-portfolio/
• same-site navigation then link back: https://yumingchang1991.github.io/personal-portfolio

Currently, I have a workaround is to make about.js to become a standalone page. (although I don't feel like to do so ...)