Ersatzbild in HTML anzeigen, wenn Bild nicht gefunden wurde

Beim Erstellen von HTML Seiten kann es immer wieder einmal vorkommen, dass man Bilder in eine Seite einbindet, die nicht angezeigt werden können.

Werbung

Gründe hierfür gibt es viele, z.B. wenn sich im Quellcode ein Schreibfehler eingeschlichen hat oder vielleicht die Bilddatei verschoben oder gelöscht wurde.

Mittels des Javascript Event-Handlers onError lassen sich derartige Fehler jedoch abfangen. Dieser wird einfach in den img-Tag geschrieben und fängt somit einen Ladefehler ab.

Das untenstehende Beispiel zeigt, wie es geht: es soll mittels img-Tag eine jpg-Datei mit dem Namen fehlendesBild.jpg eingebunden werden.
Funktioniert dies nicht, so wird im Event-Handler onError mittels JavaScript die Datei ersatzbild.jpg geladen. Dieses könnte z.B. eine neutrale Grafik enthalten, z.B. mit der Beschriftung “Bild nicht vorhanden”, etc.