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.


Comentarios

Publicar un comentario

Entradas populares de este blog

Superponer una imagen sobre otra con CSS

Imagen
El otro día me encontré con la necesidad de superponer una imagen sobre otra, mi aplicación debía mostrar una imagen y luego encima colocarle un marco quedando superpuesto. Claro está que la imagen superpuesta como un marco debe ser trasparente en su interior para poder mostrar la imagen que va debajo. Hay dos maneras de hacerlo, una poniendo el estilo en un archivo externo o incrustado en el <head> de la página web o sino agregándolo en el mismo DIV. <div style="position:relative"> <img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" /> <div style="position:absolute; top:0; left:0;"> <a href="http://www.guiaplaza.com"> <img border="0" src="marco_chistes.png" width="300" height="300" /> </a> </div> </div> Si desean la opción completa es la siguiente: <html> <he
Leer Completo »

¿Ganas dinero en Facebook con Página, Grupo, Comunidad, etc?

Imagen
Muchas páginas, comunidades, notas, grupos y foros creados dentro de Facebook podrían ser una fuente grandiosa de ingresos económicos para sus creadores.... debido a que estas le generan mucho dinero en publicidad a esta red social. Algunos webmasters ya saben lo que es ganar dinero trabajando en internet con una página web como un blog, foro o sitio temático, para los que ya reciben más de €100 euros al mes, volver a cero es definitivamente impensable.
Leer Completo »

Script para buscar palabras o textos en una página (html) con Jquery

Imagen
Aquí les muestro la solución que recientemente encontré para colocar un buscador dentro de una página web para que encuentre textos o palabras. El script funciona con Jquery y un pequeño Javascript que busca en el html y resalta (en amarillo) los textos que va encontrando según tu vayas ingresando las letras. El color de fondo puede variarse de acuerdo al tema y colores de tu página web. Es además un script moderno  (2012) que trabaja con todos los navegadores como el Chrome, IE9, Safari, etc.
Leer Completo »