Detectar quando uma imagem falha ao carregar em Javascript

Existe uma maneira de determinar se um caminho de imagem leva a uma imagem real, ou seja, detectar quando uma imagem falha ao carregar em Javascript.

Para um aplicativo da web, estou analisando um arquivo xml e criando imagens HTML dinamicamente a partir de uma lista de caminhos de imagem. Alguns caminhos de imagem podem não existir mais no servidor, portanto, quero falhar normalmente detectando quais imagens falham ao carregar e excluindo esse elemento HTML img.

Nota As soluções JQuery não poderão ser usadas (o chefe não quer usar JQuery, sim, eu sei, não me faça começar). Eu conheço uma maneira no JQuery de detectar quando uma imagem é carregada, mas não se ela falhou.

Meu código para criar elementos img, mas como posso detectar se o caminho img leva a uma falha ao carregar a imagem?

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

Você pode tentar o seguinte código. Não posso garantir a compatibilidade do navegador, então você terá que testar isso.

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

E minhas condolências para o chefe resistente a jQuery!

A resposta é boa, mas apresenta um problema. Sempre que você atribui onloadou onerrordiretamente, ele pode substituir o retorno de chamada atribuído anteriormente. É por isso que existe um bom método que "registra o ouvinte especificado no EventTarget em que é chamado", como dizem no MDN . Você pode registrar quantos ouvintes desejar no mesmo evento.

Deixe-me reescrever a resposta um pouco.

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

Como o processo de carregamento de recursos externos é assíncrono, seria ainda melhor usar o JavaScript moderno com promessas, como as seguintes.

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

);

Este:

<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

Com jQuery, isso está funcionando para mim:

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

E posso usar essa imagem em qualquer lugar do meu site, independentemente do tamanho dela, com a seguinte propriedade CSS3:

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

DICA 1: use uma imagem quadrada de pelo menos 800 x 800 pixels.

DICA 2: para uso com retrato de pessoas , useobject-position: 20% 50%;

CSS apenas para background-img

Para imagens de fundo ausentes, também adicionei o seguinte em cada background-imagedeclaração:

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

NOTA: não funciona para imagens transparentes.

Lado do servidor Apache

Outra solução é detectar a imagem ausente com o Apache antes de enviar ao navegador e substituí-la pelo conteúdo padrão no-img.png.

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

Aqui está uma função que escrevi para outra resposta: Javascript Image Url Verify . Eu não sei se é exatamente o que você precisa, mas ele usa as várias técnicas que você usaria que incluem manipuladores para onload, onerror, onaborte um tempo limite geral.

Como o carregamento da imagem é assíncrono, você chama essa função com sua imagem e, em seguida, ela chama seu retorno de chamada algum tempo depois com o resultado.

assim como abaixo:

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

if (!img.complete) {

//has picture
}
else //not{ 

}