Wie kann ich defekte Bildsymbole mit JavaScript, jQuery oder CSS ausblenden?

Stilles Ausblenden von „Bild nicht gefunden“-Symbolen mit JavaScript/jQuery/CSS

Wenn Bilder auf einer gerenderten HTML-Seite fehlen, ist dies die Standardeinstellung Das Symbol „Bild nicht gefunden“ kann ablenken und das Benutzererlebnis stören. Glücklicherweise gibt es mehrere Methoden, um dieses Symbol mithilfe verschiedener Technologien auszublenden.

JavaScript/jQuery

Die einfachste Methode ist die Verwendung des onerror-Ereignishandlers. Wenn ein Bild nicht geladen werden kann, wird das Ereignis „onerror“ ausgelöst, sodass Sie eine benutzerdefinierte Aktion ausführen können. Eine solche Aktion besteht darin, das Bild auszublenden:

<img onerror="this.style.display = 'none';" src="path/to/image.png">

CSS

CSS bietet einen einfacheren Ansatz, indem es einen bestimmten Stil für Bilder definiert, die nicht geladen werden können. Mit der Anzeigeeigenschaft können Sie die Sichtbarkeit des Bildes auf „Ausgeblendet“ setzen:

img.hide-if-failed {
    display: none;
}

Dann weisen Sie dem Bild diese Klasse zu:

<img class="hide-if-failed" src="path/to/image.png">

Mit JavaScript/jQuery um andere Elemente auszublenden

Wenn das Symbol „Bild nicht gefunden“ in einem anderen Element enthalten ist, z. B. einem Div, können Sie JavaScript oder verwenden jQuery zum Ausblenden des übergeordneten Elements, wenn das Bild nicht geladen werden kann:

$('img').on('error', function() {
  $(this).parent().hide();
});

Das obige ist der detaillierte Inhalt vonWie kann ich defekte Bildsymbole mit JavaScript, jQuery oder CSS ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!