Gestión de imágenes rotas con JavaScript

En ocasiones las urls de las imágenes dan error y se quedan rotas, la sensación de cara al usuario no es muy buena. Para minimizar la mala sensación del usuario podemos reemplazar en caso de error la url de la imagen original por otra imagen por defecto o podemos ocultarla.


Para hacerlo podemos utilizar el método error de jQuery. Cuando una imagen no se puede cargar y da error, la función que pasamos como parámetro en invocada. Dentro de esta función podemos asignar al atributo src la imagen por defecto o también ocultar la imagen.

//reemplazando
$(document).ready(function () {
    $('img').error(function () {
       $(this).attr('src', 'images/default.png');
    });
});

//ocultando
$(document).ready(function () {
    $('img').error(function () {
        $(this).hide();
    });
});

También podemos hacerlo directamente en javascript sin jQuery.

//invocando función javascript desde el atributo onerror de la etiqueta img
function imgError(image) {
    image.src = "images/default.png";
}