Comment masquer une image par défaut sur votre site web

Trois façons de masquer une image sans la supprimer

1. CSS (Meilleur pour la mise en page)

/* Masquer par classe */ .hidden-img { display: none; }
/* Ou masquer image spécifique par ID */
#hero-image { visibility: hidden; } /* garde l'espace */
#hero-image { display: none; } /* retire du flux */

Ajouter la classe/l'ID à <img> ou envelopper dans <div>.

2. JavaScript (Conditionnel)

<script>
function hideImage(id) {
  document.getElementById(id).style.display = 'none';
}
// Appel au chargement, action utilisateur, breakpoint, etc.
window.addEventListener('DOMContentLoaded', () => hideImage('default-avatar'));
</script>

3. Renommer/Supprimer le fichier (Option nucléaire)

Renommer default.jpg → default.jpg.hidden. Le navigateur renvoie 404 ; l'image disparaît. Inconvénient : erreurs 404 en console, casse le cache.

Recommandation

Utiliser CSS display: none pour masquage responsive (media queries). Utiliser JS pour masquage logique (rôle utilisateur, test A/B). Éviter le renommage de fichier.

Note accessibilité

Si l'image véhicule du sens, fournir un alt text ou aria-label sur le conteneur — même si masquée visuellement.