Cómo ocultar una imagen predeterminada en tu sitio web

Tres formas de ocultar una imagen sin eliminarla

1. CSS (Mejor para el diseño)

/* Ocultar por clase */ .hidden-img { display: none; } /* O ocultar imagen específica por ID */ #hero-image { visibility: hidden; } /* mantiene el espacio */ #hero-image { display: none; } /* elimina del flujo */ 

Agrega clase/id a <img> o envuelve en <div>.

2. JavaScript (Condicional)

<script> function hideImage(id) { document.getElementById(id).style.display = 'none'; } // Llamar al cargar, acción del usuario, punto de interrupción, etc. window.addEventListener('DOMContentLoaded', () => hideImage('default-avatar')); </script> 

3. Renombrar/Eliminar archivo (Nuclear)

Renombra default.jpg → default.jpg.hidden. El navegador devuelve 404; la imagen desaparece. Desventaja: 404s en la consola, rompe el caché.

Recomendación

Usa CSS display: none para ocultamiento responsivo (consultas de medios). Usa JS para ocultamiento basado en lógica (rol de usuario, prueba A/B). Evita renombrar archivos.

Nota de accesibilidad

Si la imagen transmite significado, proporciona texto alt o aria-label en el contenedor—aunque esté oculta visualmente.