Como Tratar Erro De Carregamento De Uma Imagem HTML

Quando estamos desenvolvendo, devemos nos preocupar em como a informação será apresentada na tela
Nossos sistemas normalmente contém algumas imagens, seja elas estáticas (aquela que nós mesmo inserimos o endereço da foto)
Quanto também imagens que foram enviadas pelo próprio usuário (foto de perfil, por exemplo)
E obviamente, não queremos que nosso layout fique quebrado por um erro na imagem, certo?

Pensando nisso, você sabia que a tag img aceita um evento chamado onerror?

Com essa propriedade, você consegue tratar o erro no momento de carregamento de uma imagem
Sendo assim, no momento que a imagem “quebrar”, você pode substituir essa imagem por uma genérica!

Basta adicionar, em sua tag img:

<img src="logo.png" onerror="handleError(this)">
<!--
    Usamos o this para passar como parâmetro
    para que o Javascript tenha acesso as
    propriedades da nossa tag img.
-->

E tratar esse erro no Javascript:

function handleError(image) {
    image.onerror = "";
    image.src = "/img/img-default.png";
    return true;
}

Assim, conseguimos evitar imagens quebradas na nossa aplicação
Evitando que nosso layout também fique comprometido com problemas!