Boa noite computêros, trabalhando com sistemas web muitas vezes estamos acessando alguma imagem que por algum motivo não esteja mais disponível e com isso ela não será exibida ou caso você use o Internet Explorer ficará aquele “x” chatinho. Como contornar isso?

Imagine que eu esteja criando uma página simples com uma imagem:

<html>
<head>
<title>Tratamento de imagens inexistentes ou corrompidas no servidor com javascript</title>
</head>

<body>
<img src=”twitter.jpg” />
</body>
</html>

A página será exibida com a imagem corretamente:

Imagem exibida corretamente

Agora se por algum motivo a imagem não estar acessível o browser apresenta um erro:

Erro ao exibir imagem

Para contornarmos esse erro e verificarmos se a imagem foi exibida corretamente vamos aplicar a seguinte idéia:

Criar uma rotina para o tratamento dos erros

Incluir essa rotina no evento on error de cada imagem

Veja o código:

<html>
<head>
<title>Tratamento de imagens inexistentes ou corrompidas no servidor com javascript</title>
<script type=”text/javascript”>
function trataErroImagem(img){
img.onerror=null;
img.src = “cabeca.png”
}
</script>
</head>

<body>
<img src=”twitter.jpg” onerror=”trataErroImagem(this)”/>
</body>
</html>

Sendo assim, quando a imagem “twitter.jpg” não estiver disponível o javascript alterará automaticamente para “cabeca.png”.

Veja o resultado:

Imagem alterada pelo javascript

É isso aí computêros, espero que tenha ajudado…

Obs: Somente utilizei o Internet Explorer para o tutorial porque o Firefox não apresenta o “x”.

Comentem!

<html>
<head>
<title>Tratamento de imagens inexistentes ou corrompidas no servidor com javascript</title>
</head>

<body>
<img src=”twitter.jpg” />
</body>
</html>