Reemplazar enlaces rotos de imágenes con jQuery/JavaScript

En toda página web suelen haber imágenes. Éstas estarán localizadas en el mismo servidor que la web, pero también pueden estar ubicadas en servidores de terceros, lo que hace que puedan cambiar su ubicación o simplemente ser eliminadas, lo que harían que no se carguen en nuestra web. Esto es difícil de prevenir, pero se puede reemplazar enlaces rotos de imágenes por un enlace a otra imagen que puede ser una estándar que tengamos. Esto, al menos, queda estéticamente mejor que el típico icono con la X cuando no se encuentra el recurso.

Un enlace roto es como se llama a cuando hay un enlace en una página web que redirige a otro recurso (puede ser otra página web, una imagen, un fichero, etc.) que en su día funcionaba pero que actualmente el recurso de destino ya no se encuentra en la misma ubicación, lo que puede dar lugar al típico error 404 o, en el caso de los enlaces rotos de imágenes, al icono con el aspa roja indicando que ahí debería haber una imagen.

Existen herramientas como Google Webmaster Tools que pueden ayudar a detectar este tipo de errores. Sin embargo, en el caso de las imágenes, se puede controlar por JavaScript o JQuery que se cargue otra imagen que la sustituya, de forma que se haga más amigable para el usuario, mostrando por ejemplo una imagen con la leyenda no encontrado o la usual cámara de fotos tachada.

Enlaces rotos de imágenes con JavaScript

En JavaScript, sin ningún framework o librería adicional, se puede sustituir la imagen con esta sencilla función. En la asignación de image.src se pondría la ruta a la imagen con la que se sustituirá.

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

Esta función deberá ser llamada en el evento onerror de cada imagen donde se quiera aplicar, de la siguiente manera.

<img src="image.png" onerror="imgError(this);"/>

Como la función es sencilla, se puede hacer sin utilizar una función. Aunque recomiendo crear la función por temas de legibilidad del código y por reusabilidad, ya que se puede reutilizar la función para varias imágenes.

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

Enlaces rotos de imágenes con JQuery

Con JQuery, se puede hacer la sustitución de enlaces rotos de imágenes con el siguiente código.

$(“img”).on(“error”, function () {
  $(this).unbind("error").attr("src", "/images/noimage.gif");
});

Esto sería equivalente al anterior código de JavaScript. La ventaja está en que al utilizar el selector «img», no habría que ir luego imagen por imagen llamando a la función en el evento onerror.