Detectar cuando una imagen no se carga en Javascript

La respuesta es agradable, pero introduce un problema. Siempre que asigne onload o onerror directamente, 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 en el que se llama" como dicen en MDN. Puede registrar tantos oyentes como desee en el mismo evento.

Permítanme 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");

Porque el proceso de carga de recursos externos es asíncrono, 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');
    }

);

Esto:

<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;
});

Aquí hay una función que escribí para otra respuesta: Url de imagen de Javascript Verificar. No se si es exactamente lo que necesitas, pero usa las diversas técnicas que usarías, que incluyen manejadores para onload, onerror, onabort y un tiempo de espera general.

Debido a que la carga de la imagen es asincrónica, llama a esta función con su imagen y luego llama a su devolución de llamada algún tiempo después con el resultado.

JQuery + CSS para img

Con jQuery esto funciona para mí:

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

Y puedo usar esta imagen en todas partes en mi sitio web independientemente del tamaño de la misma con la siguiente propiedad CSS3:

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

CONSEJO 1 : utilice una imagen cuadrada de al menos 800 x 800 píxeles.

CONSEJO 2: para usar con retrato de personas, use object-position: 20% 50%;

CSS solo para background-img

Para las imágenes de fondo faltantes, también agregué lo siguiente en cada background-image declaració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 faltante con Apache antes de enviarla al navegador y volver a colocarla por el valor predeterminado no-img.contenido png.

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

Justo como abajo:

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

if (!img.complete) {

//has picture
}
else //not{ 

}