Im digitalen Zeitalter ist die Präsentation von Bildern auf Webseiten von entscheidender Bedeutung. Wenn bei einem Bild ein Ladefehler auftritt, sollte eine effiziente Lösung bereitgestellt werden, um sicherzustellen, dass die Nutzererfahrung nicht beeinträchtigt wird. Der folgende Code liefert eine einfache Methode, um ein alternatives Bild anzuzeigen, falls ein ursprüngliches Bild nicht geladen werden kann.

Fehlerbehandlung für Bilder

Die Funktion imageLoadError übernimmt die Aufgabe, ein Platzhalterbild anzuzeigen, wenn das gewünschte Bild fehlschlägt. Im Folgenden wird die Funktionsweise im Detail erläutert:

function imageLoadError(img) {
    const fallbackImage="/media/sites/cnn/cnn-fallback-image.jpg";

    img.removeAttribute('onerror');
    img.src = fallbackImage;
    let element = img.previousElementSibling;

    while (element && element.tagName === 'SOURCE') {
      element.srcset = fallbackImage;
      element = element.previousElementSibling;
    }
  }

Umsetzung und Anwendung

Wenn sich ein Bild nicht laden lässt, wird das Skript automatisch das definierte Alternativbild verwenden. Dies verbessert nicht nur die Benutzerfreundlichkeit, sondern sorgt auch dafür, dass die Website optisch ansprechend bleibt. Um diese Funktion zu nutzen, muss lediglich das Attribut onerror vom Bild entfernt und die Quelle des Alternativbildes gesetzt werden.

Fazit zur Bildverarbeitung

Die Implementierung robuster Fehlerbehandlungsmechanismen ist entscheidend für die Aufrechterhaltung einer professionellen Webpräsenz. Durch das Anzeigen eines Fallback-Bildes geben Sie Ihren Nutzern eine konsistente Erfahrung, selbst wenn technische Probleme auftreten. Eine durchdachte Bildverwaltung ist nicht nur für das Design, sondern auch für die SEO Ihrer Seite von Vorteil.

© Amr Alfiky/Reuters