Como Ocultar uma Imagem Padrão no Seu Site

Três Formas de Esconder Imagem Sem Apagar

1. CSS (Melhor para Layout)

/* Esconder por classe */ .hidden-img { display: none; } /* Ou esconder imagem específica por ID */ #hero-image { visibility: hidden; } /* mantém espaço */ #hero-image { display: none; } /* remove do fluxo */

Adicione classe/id no <img> ou envolva em <div>.

2. JavaScript (Condicional)

<script> function hideImage(id) { document.getElementById(id).style.display = 'none'; } // Chame no load, ação do usuário, breakpoint, etc. window.addEventListener('DOMContentLoaded', () => hideImage('default-avatar')); </script>

3. Renomear/Remover Arquivo (Nuclear)

Renomeie default.jpg → default.jpg.hidden. Navegador retorna 404; imagem some. Desvantagem: 404s no console, quebra cache.

Recomendação

Use CSS display: none para ocultação responsiva (media queries). Use JS para ocultação baseada em lógica (perfil de usuário, teste A/B). Evite renomear arquivo.

Nota de Acessibilidade

Se a imagem transmite significado, forneça alt text ou aria-label no container — mesmo se ocultada visualmente.