12.03.2025

Exibindo uma Imagem Padrão Quando a Principal Está Ausente em HTML

Resumo Rápido

O atributo onerror na tag <img> ajuda a resolver o problema de falhas no carregamento de imagens:

<img src="missing.jpg" onerror="this.src='fallback.png';" alt="Descrição da Imagem">

Pontos Chave:

• onerror é acionado quando há um erro ao carregar a imagem principal.
• "this.src='fallback.png';" especifica o caminho para a imagem de substituição.
• alt é um elemento de segurança que melhora a acessibilidade e o SEO, sendo crucial quando a imagem não está disponível.

Essa abordagem melhora a confiabilidade da página e garante uma experiência de usuário agradável.

Soluções para Problemas de Carregamento de Imagens

Trocar por uma Imagem de Substituição

Torne suas páginas mais atraentes usando onerror para substituir automaticamente uma imagem padrão:

<img src="caminho_para_imagem.jpg" onerror="this.src='default.jpg';" alt="Descrição">

Remover Imagens Ausentes

O HTML permite esconder a imagem caso ela não esteja disponível:

<img src="caminho_para_imagem.jpg" onerror="this.remove();" alt="Descrição">

Usar JavaScript para Tratar Problemas de Carregamento

Utilize JavaScript para um tratamento de erros mais detalhado:

<img src="caminho_para_imagem.jpg" onerror="handleError(this);" alt="Descrição">
<script>
function handleError(image) {
    // Seu código de tratamento de erro em JavaScript
}
</script>

Proteger Imagens com <object>

A tag <object> pode atuar como um contêiner para <img>, aumentando sua proteção:

<object data="imagem.jpg" type="image/jpeg">
    <img src="imagem.jpg" onerror="this.src='fallback.jpg';" alt="Descrição">
</object>

Melhorar a Acessibilidade com Texto Alternativo

Não esqueça da importância do texto alternativo para cada imagem:

<img src="imagem.jpg" onerror="this.src='fallback.jpg';" alt="Imagem ausente.">

O texto alternativo melhora a acessibilidade e pode ser útil quando tanto a imagem principal quanto a de substituição estão indisponíveis.

Visualização

Imagine a página como uma galeria de arte, onde as imagens são pinturas e suas versões de backup são esboços:

Coleção Principal: [🖼️, 🖼️, 🖼️, ❓, 🖼️]
Substituições: [✏️, ✏️, ✏️, ✏️, ✏️]

Quando a imagem principal não carrega (404), a galeria oferece um esboço pré-preparado:

Tour pela Galeria:
Coleção Principal: [🖼️, 🖼️, 🖼️, ✏️, 🖼️]

Isso ilustra visualmente a importância de ter uma opção de backup.

Opção de Backup: Quando a imagem original desaparece, o esboço ajuda a manter a integridade da exibição.

Como Evitar Problemas

Prevenir Laços Infinito de Erros

Uma forma de evitar laços de erro prejudiciais e infinitos:

<img src="imagem.jpg" onerror="this.onerror=null; this.src='fallback.jpg';" alt="Descrição">

Dizer "não" a tentativas infinitas de carregar a mesma imagem de substituição, configurando onerror como null após a primeira falha.

Controlar a Disponibilidade de Imagens de Substituição no Servidor

Verifique se a imagem de substituição está acessível no servidor:

<img src="imagem.jpg" onerror="this.src='/caminho/para/default.jpg';" alt="Descrição">

Utilize URLs absolutas para que seu navegador sempre saiba onde os arquivos de substituição estão localizados.

Substituir Imagens Ausentes... por Nada?

Em alguns casos, uma imagem deve desaparecer se não estiver disponível:

<img src="imagem.jpg" onerror="this.src='';" alt="Descrição">

Um src vazio juntamente com onerror permite deixar o espaço da imagem em branco, sem oferecer uma substituição.

Testando Seu Plano de Substituição

Testar fornece confiança na confiabilidade do seu plano de substituição:

1. Renomeie a imagem para acionar um erro 404.
2. Verifique se a imagem de substituição ou a lógica aplicada funcionam corretamente.

Testes garantem a gestão de imagem sem erros na sua página.

Recursos Úteis

1. <img>: Elemento de Embedding de Imagem - HTML: Linguagem de Marcação de Hipertexto | MDN - O MDN oferece um guia detalhado sobre o uso da tag <img>.
2. URLs de Dados - HTTP | MDN - Um artigo sobre URLs de dados e seu uso em HTML para imagens.
3. Atributo de Evento onerror em HTML - Um guia detalhado sobre o atributo onerror e seu uso em HTML.
4. jQuery/JavaScript para Substituição de Imagens Quebradas - Stack Overflow - No Stack Overflow, você encontrará suporte e recomendações para resolver problemas de imagens.
5. Atributo alt da imagem HTML - Informações relevantes sobre o atributo alt e seu papel em acessibilidade e SEO.

Video

Navigation