2

No he podido hacer que mis imagenes se muestren en github pages, intente cambiar varias veces el enlace de la imagen y sigue sin mostgrarse. En verdad que no encuentro el error, seria de GRAN ayuda si me dicen que estoy haciendo mal. Gracias!

Esta es la pagina:

https://albscr.github.io/NFT_preview_card/

Responsorio de Github:

https://github.com/albscr/NFT_preview_card.git

Las imagenes estan puestas en el INDEX

2
  • Bienvenido a Stack Overflow te recomiendo que hagas el recorrido de bienvenida y mires como Cómo preguntar correctamente. El código lo deberías de poner en formato de texto, en vez de un enlace, ya que si este deja de funcionar, no se podría acceder. Te recomiendo editar la pregunta y mejorarla.
    – Maida
    Commented el 1 sept. 2022 a las 12:01
  • Recuerda poner esta pregunta como finalizada, y marcar que di con la respuesta correrta Commented el 4 sept. 2022 a las 0:50

3 respuestas 3

2

Este es un fragmento de tu código:

    <img
      class="user-photo"
      src="/img/image-avatar.png"
      alt="Photo of creator"
    />

si le sacas la primer barra a img debería funcionar tal que así:

   <img
      class="user-photo"
      src="img/image-avatar.png"
      alt="Photo of creator"
    />

Para darte cuenta de ese tipo de problemas siempre podes entrar a tu browser y poner inspeccionar, y modificar en este caso, la dirección de la imagen.

1
  • Gracias Sergio! Modifique el código y ya funcionó. Este era un problema que me di cuenta había realizado en mis demás practicas y no me había percatado de ello hasta que no me funcionó en github pages. Gracias
    – albscr
    Commented el 3 sept. 2022 a las 18:45
0

Puede ser que esté mal la ruta, Github Pages no encontrará la ruta si es errónea y es por ello que no sale tu imagen. Te doy las posibles soluciones a tu problema:

Si la imagen está en la misma carpeta que tu archivo:

<img src="/image-avatar.png" />

O también de esta forma:

<img src="./image-avatar.png" />

O si está fuera de la carpeta de tu archivo:

<img src="../image-avatar.png" />

Te recomiendo inspeccionar en tu ordenador de manera local y verificar que las imágenes se visualicen correctamente. También, la carpeta de donde estén tus imágenes deben estar dentro de tu proyecto que subirás en tu repositorio para que de esta forma Github Pages encuentre las imágenes.

2
  • Diria que esto que dices es erróneo: Si la imagen está en la misma carpeta que tu archivo: <img src="/img/image-avatar.png" /> pues según mi entender, en este caso que dices, donde el archivo index y la imagen comparten carpeta, sería así: <img src="image-avatar.png" />. Además, suponiendo que realmente la imagen estuviera dentro de la carpeta img, tal como lo pones (con la barra / al inicio) solo podria estar en la raiz de su web y no es una subcarpeta que es como lo tiene ahora: https://albscr.github.io/NFT_preview_card/
    – masterguru
    Commented el 1 sept. 2022 a las 15:22
  • Sería así en caso la imagen esté en la misma carpeta que el index. La ruta de las imágenes varían dependiendo en donde se encuentren. Commented el 1 sept. 2022 a las 15:25
0

No se si ya lo hayan solucionado, pero dejare la forma en que lo hice yo. Anduve buscando en diferentes foros y nada fubcionaba. Lo que hice fue usar un import de la siguiente manera:

import logo from '/src/assets/img/imagen.png';

y despues en el src de la imagen:

<img src={logo}  alt="Logo"/>

Y asi ya se pudo mostrar la imagen.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.