Detectar cuando una imagen no se carga en Javascript

¿Hay alguna manera de determinar si la ruta de una imagen conduce a una imagen real, es decir, detectar cuando una imagen no se carga en Javascript?

Para una aplicación web, estoy analizando un archivo xml y creando dinámicamente imágenes HTML a partir de una lista de rutas de imágenes. Es posible que algunas rutas de imagen ya no existan en el servidor, por lo que quiero fallar con elegancia al detectar qué imágenes no se cargan y eliminar ese elemento img HTML.

Tenga en cuenta que las soluciones de JQuery no podrán usarse (el jefe no quiere usar JQuery, sí, sé que no me ayude a comenzar). Conozco una forma en JQuery de detectar cuándo se carga una imagen, pero no si falló.

Mi código para crear elementos img, pero ¿cómo puedo detectar si la ruta img conduce a una imagen que no se pudo cargar?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

Puedes probar el siguiente código. Sin embargo, no puedo garantizar la compatibilidad del navegador, así que tendrás que probarlo.

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

¡Y mis condolencias por el jefe resistente a jQuery!

La respuesta es buena, pero presenta un problema. Siempre que asigne onloado onerrordirectamente, puede reemplazar la devolución de llamada que se asignó anteriormente. Es por eso que hay un buen método que "registra el oyente especificado en el EventTarget al que se llama", como dicen en MDN . Puede registrar tantos oyentes como desee en el mismo evento.

Déjame reescribir un poco la respuesta.

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

Debido a que el proceso de carga de recursos externos es asincrónico, sería aún mejor usar JavaScript moderno con promesas, como las siguientes.

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

Esta:

<img onerror="this.src='/images/image.png'" src="...">

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});

jQuery + CSS para img

Con jQuery esto me funciona:

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

Y puedo usar esta imagen en cualquier lugar de mi sitio web sin importar su tamaño con la siguiente propiedad CSS3:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

SUGERENCIA 1: use una imagen cuadrada de al menos 800 x 800 píxeles.

SUGERENCIA 2: para usar con retratos de personas , useobject-position: 20% 50%;

CSS solo para background-img

Para las imágenes de fondo que faltan, también agregué lo siguiente en cada background-imagedeclaración:

background-image: url('path-to-image.png'), url('no-img.png');

NOTA: no funciona para imágenes transparentes.

Lado del servidor Apache

Otra solución es detectar la imagen que falta con Apache antes de enviarla al navegador y reemplazarla por el contenido predeterminado no-img.png.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

Aquí hay una función que escribí para otra respuesta: Javascript Image Url Verify . No sé si es exactamente lo que necesita, pero utiliza las diversas técnicas que utilizaría que incluyen controladores para onload, onerror, onaborty un tiempo de espera general.

Debido a que la carga de imágenes es asincrónica, llama a esta función con su imagen y luego llama a su devolución de llamada en algún momento posterior con el resultado.

como a continuación:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}