¿Por qué no carga mi imagen?

El síntoma: El icono de imagen rota

No hay nada que dé una peor impresión que una web llena de iconos de archivos no encontrados. Escribes tu etiqueta <img>, pero el navegador solo muestra el texto alternativo o un recuadro vacío.

En el 99% de los casos, el HTML no está roto; lo que está mal es la dirección (URL) que le has dado al navegador para encontrar el archivo.

Recuerda: el navegador es literal. Si falta una letra, una barra o la extensión no es exacta, la imagen no se mostrará.

Causa 1: Rutas relativas mal calculadas

Es el error más común al organizar carpetas. Si tu HTML está en la raíz y tu imagen en una carpeta llamada /imgs, la ruta debe ser imgs/foto.jpg.

Si intentas cargar una imagen que está en una carpeta "superior" a la de tu archivo HTML, debes usar ../ para salir de la carpeta actual antes de entrar en la siguiente.

Error común:

<img src="foto.jpg"> (Busca la imagen en la misma carpeta que el HTML)

Solución correcta:

<img src="assets/imgs/foto.jpg"> (Ruta precisa hacia la subcarpeta)

Causa 2: Mayúsculas y extensiones

Muchos servidores de internet (Linux) distinguen entre mayúsculas y minúsculas. Para un servidor, foto.jpg y FOTO.JPG son archivos totalmente distintos.

Asegúrate también de que la extensión es la correcta. A veces un archivo parece un .jpg pero internamente es un .jpeg o un .webp. Si no coinciden exactamente, el navegador no la cargará.

Arréglalo ahora

¿No estás seguro de cuál es tu fallo? Hemos preparado un ejemplo con una ruta rota en nuestro editor. Intenta corregir el nombre del archivo o la carpeta para que la imagen aparezca.

La imagen está realmente en la carpeta imgs dentro de la misma carpeta que la página

Imagen y carpeta imgs tienen la misma razi o carpeta padre. Soluciónalo.

<h2>Paisajes</h2>

<p>Autora: Yulia Gapeenko</p>

<p>Titulo: IA-Desierto estelar</p>

</div>

Ejemplo: Referencia relativa mal calculada.

Si después de revisar la ruta sigues sin verla, inspecciona el elemento (F12) y revisa la pestaña "Console"; allí el navegador te dirá exactamente qué archivo no pudo encontrar con un error 404.