HTML: Ersatzbild anzeigen, wenn Bildquelle nicht gefunden wurde

Wenn man HTML Seiten erstellt, kann es vorkommen, dass man Bilder in eine Seite einbindet, die nicht angezeigt werden können. Mögliche Gründe sind z.B. Schreibfehler im Quellcode oder vielleicht, dass die Bilddatei verschoben oder gelöscht wurde. Im Browser wird dann anstatt eines Bildes ein Platzhalter angezeigt. Je nach Browser sieht das dann etwa so aus:

Man kann das aber mit JavaScript abfangen. Mit dem Event-Handler onError kann man dafür sorgen, dass im Falle eines Ladefehlers ein alternatives Bild geladen wird. Dieser Handler wird einfach in den img-Tag geschrieben und fängt somit einen Ladefehler ab.

Das folgende 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 sein, z.B. mit der Beschriftung “Bild nicht vorhanden”.

Hier ein kleines Code-Beispiel:

<img src="fehlendesBild.jpg" onError="this.src=’ersatzbild.jpg’;" alt="Fehlendes Bild">

Bleiben Sie jetzt auf dem Laufenden!

Mit unserem Newsletter erhalten Sie wertvolle Informationen zum Nulltarif! Melden Sie sich für unseren kostenlosen Newsletter an!

Sie können sich jederzeit wieder austragen. Wir nutzen den professionellen Email-Service von Cleverreach.

Schreiben Sie uns!

    Name *

    E-Mail *

    Telefon *

    Leistung

    Ihre Nachricht an uns*

    Spamschutz - bitte geben Sie folgenden Code hier ein: captcha

    Ihre Daten sind bei uns sicher. Mit dem Absenden des Formulares akzeptieren Sie unsere Datenschutzerklärung - Zur Datenschutzerklärung

    Please prove you are human by selecting the cup.