En ocasiones nos podemos encontrar con que no somos capaces de visualizar las imágenes en nuestra página web. En este artículo analizamos las posibles causas de este error.
Para insertar imágenes en una página web utilizamos la etiqueta IMG, cuya sintaxis es la siguiente:
<img src="nombre_de_la_imagen.ext">
Los formatos de imagen más empleados en las páginas web son GIF, JPG y PNG. El formato BMP no es recomendable, pues asigna a cada píxel un valor cromático y suelen ser archivos de excesivo tamaño.
Lo primero que debemos hacer es asegurarnos de que el nombre de la imagen no tenga ningún espacio ni carácter especial (y especialmente acentos).
En algunos navegadores los caracteres son codificados con el carácter “%” antes. Por ejemplo, un espacio se convierte en “%20”. Si el carácter “%” se encuentra en la dirección, ello quiere decir que el nombre del archivo es incorrecto.
Por otro lado, debemos asegurarnos de indicar la ruta relativa (o absoluta) de la imagen de manera correcta. Para llevarlo a cabo, únicamente indicaremos el nombre de la imagen cuando esta se encuentre en la misma carpeta que la página HTML. En caso contrario deberemos indicar su ruta relativa.
Por ejemplo:
../carpeta/img.jpg
O también podemos indicar su ruta absoluta. Por ejemplo:
<img src="http://site.net/images/img.jpg">
En el caso de la ruta absoluta será la misma para todas las páginas del sitio web.
También hay que respetar el uso de mayúsculas y minúsculas.
Por ejemplo, si la imagen se encuentra en:
mis_imagenes/imagen_1.png
La ruta debe ser escrita de la misma manera:
<img src="mis_imagenes/imagen_1.png">
<img src="Mis_Imagenes/imagen_1.png">
<img src="mis_imagenes/Imagen_1.png">