Wie kann ich defekte Bilder mithilfe von CSS und HTML ausblenden oder ersetzen?

Ausblenden defekter Bildplatzhalter mit CSS/HTML

Trotz der Einschränkungen von CSS und HTML bei der Erkennung defekter Bildlinks gibt es nur minimale Problemumgehungen Verbergen oder verwalten Sie solche Fälle.

Verstecken kaputt Bilder

Um defekte Bildplatzhalter zu verdecken, können Sie das onerror-Attribut im verwenden. tag:

<img src="Error.src" onerror="this.style.display='none'" />

Mit diesem Attribut wird die Anzeige eines Bildes ausgeblendet, wenn es fehlschlägt, es zu laden.

Ersetzen durch ein Backup-Image

Alternativ können Sie bei defekten Links ein Ersatzbild angeben:

<img src="Error.src" onerror="this.src='fallback-img.jpg'" />

Wenn ein Bild nicht geladen werden kann, Die Quelle wird auf das angegebene Fallback-Bild umgeschaltet.

Hinweis: Während CSS und HTML allein nicht zwischen defekten und gültigen Bildern unterscheiden können, kann das onerror-Attribut für den Umgang mit defekten Bildplatzhaltern nützlich sein in beiden Fällen.

Zusätzliche Optionen

Für die Verwaltung mehrerer defekter Bilder auf Ihrer Website bietet JavaScript eine robustere Lösung Lösung. Sie können einen Ereignis-Listener an den DOM anhängen und dieselbe Logik auf alle Bilder auf der Seite anwenden:

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
      img.onerror = function(){this.style.display='none';};
   })
});

Dieses Skript wendet den Stil „display: none“ auf alle defekten Bilder an, nachdem der DOM vollständig geladen wurde.

Das obige ist der detaillierte Inhalt vonWie kann ich defekte Bilder mithilfe von CSS und HTML ausblenden oder ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!