Trabajando a partir de esta plantilla para crear un sitio web de reacción con interacciones de contratos inteligentes, pude hacer que todo funcionara y apareciera sin problemas en localhost . Todas las funciones del sitio funcionaron y las imágenes se renderizaron correctamente, pero después de construir e implementar a través de npm , el sitio de gh-pages no parece haber encontrado mi imagen y los componentes JS.
Intenté editar la homepage de inicio como se ve aquí , sin éxito. También revisé el archivo index.html e intenté jugar con las ubicaciones de scr . No estoy seguro de qué está pasando, y soy muy nuevo en todo esto, ¡así que agradezco cualquier ayuda!
Editar: según los comentarios aquí, actualicé las rutas relativas para todas las imágenes. Esto solucionó el problema de visualización de imágenes para algunas imágenes, pero no para todas. Los elementos CONFIG todavía están rotos en la implementación, aunque funcionan bien en localhost
Revisé su repositorio y la siguiente línea es su problema (ocurre cuando su aplicación React implementada no está en el directorio raíz de su dominio, sino dentro de una subcarpeta):
<StyledImg alt={"example"} src={"/config/images/example.gif"} /> Cuando tacleas / no estás en el repositorio de tu proyecto, sino en tu carpeta raíz de GitHub en myusername.github.io , mientras que deberías estar dentro de myusername.github.io/my-repo . Una buena manera de superar este problema es reemplazar la línea anterior con:
<StyledImg alt={"example"} src=`${process.env.PUBLIC_URL + "/config/images/example.gif"}` /> Y coloque en su package.json la URL de la página de GitHub de su aplicación, así:
"homepage": "https://jack-baumgartel.github.io/Modern-Abstractions"Tuve que profundizar un poco más en config/config.json y cambiar la variable src de Modern-Abstractions/config/config.json a solo config/config.json . ¡También ayudó agregar la "homepage" a package.json! ¡Gracias a todos!