Mostrar fotos alternativas para evitar imágenes rotas

A menudo los desarrolladores crean plantillas dinámicas en donde las imágenes son servidas desde otro servidor o desde otras carpeta en el mismo sitio.

Muchas veces estas imágenes no cargan por diversos motivos, así que hay que valerse de un pequeño truco para evitar un cuadrado vacío o la incómoda imagen rota que proporciona el navegador.

La solución un pequeño código:

Tu código de Imagen Normal

<img src="http://guiaplaza.com/foto.jpg" alt="foto">

Tu código de Imagen Optimizado


<img src="http://guiaplaza.com/foto.jpg" alt="foto" onerror="this.src='http://guiaplaza.com/imagenerror.png';">

Como habrás entendido solo hubo que agregar:

onerror="this.src='http://guiaplaza.com/imagenerror.png';" dentro de la imagen.

La imagen alternativa solo se mostrará si es que la imagen principal del SRC no se visualiza.

Importante:


  • Ambas imágenes deben ser del mismo tamaño.
  • Si la imagen principal es más pequeña y el contenedor es más grande la imagen alternativa se verá llenando todos los espacios libres.
  • Se recomienda una imagen en blanco y negro o una imagen con un 50% de opacidad.


No hay comentarios:

Publicar un comentario

Ultimos temas en Soluciones para Webmasters: