El uso de absolute path en img src resuelve mi problema, pero se desconoce el motivo que causó el problema original.

Agregué un prefijo personalizado al enrutamiento NEXT y no NEXT/IMG para representar la foto de perfil. Supongo que es la razón por la cual el atributo img src no cambia de acuerdo con la configuración del prefijo de la siguiente ruta.

Pregunta inicial

Estoy creando mi primer portafolio en línea usando Next + React, y luego lo publiqué en páginas de github. Hay una foto en la página de inicio de la cartera.

• Cuando visito la página por primera vez, la foto se muestra correctamente
• pero si navega a otras páginas del mismo sitio, y luego desea volver a visitar la página de inicio haciendo clic en el logotipo del sitio, que es un punto de Siguiente/Enlace de regreso a la página de inicio. la foto no esta renderizada
• hay un botón flotante en la esquina inferior derecha que usa la misma foto, siempre se muestra correctamente
• Github Repo : la rama principal es la rama activa
• advertencia: mi código definitivamente está estructurado horriblemente. Podría lastimarte los ojos...

mi foto de perfil se llama Avatar.png almacenada en una carpeta pública

aquí es donde el código devuelve mi foto de perfil

 // 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

Observé que hay un '/' adicional adjunto al final de la URL cuando visité por primera vez

• primera visita: https://yumingchang1991.github.io/personal-portfolio/
• Navegación en el mismo sitio y luego enlace de regreso: https://yumingchang1991.github.io/personal-portfolio

Actualmente, tengo una solución alternativa para hacer que about.js se convierta en una página independiente. (aunque no tengo ganas de hacerlo...)