Mostrar una imagen diferente en los links rotos de las imágenes

Algunos tienen la mala costumbre de hacer hot-linking en su blog, es decir, andan navegando por la red, encuentran una imagen, consiguen su URL y la usan para mostrar dicha imagen en su blog. Es es el hot-linking, y lo único que hace es que perjudiquemos el ancho de banda del sitio al que le hemos tomado la foto. Pero además de eso corres el riesgo de que el dueño del sitio Web elimine la imagen y te quedes sin ella.

Cuando eso sucede obviamente la imagen ya no se mostrará en el blog y en su lugar veremos el típico icono que representa que una el vínculo de una imagen está roto, o sea que el link de esa imagen no funciona.

Pero esa no es la unica razón por la que pueda aparecernos ese icono, a veces aun cuando subimos las imágenes a nuestro propio hosting el servidor puede estar caído, la conexión puede andar lenta, sin querer eliminamos la foto, o simplemente hemos copiado mal la URL de la imagen. En cualquiera de esos casos puede aparecer el icono de la que hablo que indica que la imagen no existe o no cargó.

Lo que veremos hoy es cómo mostrar una imagen diferente al habitual icono predeterminado que trae el navegador, de manera que podamos cambiar la imagen que se muestra cuando la URL de la imagen está rota.

Así que cambiaremos esto:

Por una imagen personalizada, como por ejemplo, esta:

Para conseguirlo usaremos un script muy corto que lo que hace es detectar el tamaño ancho de la imagen, si lo encuentra en cero entonces mostrará la imagen que hemos elegido.
Sólo debes entrar en Diseño | Edición de HTML y antes de </head> pegar lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Script para sustituir imágenes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNH5rVHVaiDNlT3e1cURc93zLmUL-DNHAUXClNzKUgfW9iGSrmoSqL0VXNguzOijWHOwBfV1K9FGl4nDL_I4XPDic_zs7UJOpgja6irS5izyBFii733n-5ogKRiJ95VhK1traOfaFeRsA/";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Lo que está en color rojo es la URL de la imagen de ejemplo que he puesto, pero puedes cambiarla por alguna que tú diseñes o el icono que tú elijas.

Cabe aclarar, que este script no sustituirá las imágenes de los hostings que añaden su propia imagen para indicar que la imagen ha sido eliminada como es el caso de TinyPic y Photobucket.
Recuerda que, para evitar en lo mayor posible que las imágenes no se vean, no uses la imagen de alguien más, mejor sube tus imágenes a Picasa y así te evitarás muchos dolores de cabeza.

El script está probado en Firefox 5, Google Chrome 12, Opera 11, Safari 5, Internet Explorer 7, 8 y 9. En todos funciona, si no ves el icono personalizado de inmediato entonces tienes que esperar a que cargue el blog por completo.