Snippet

Behandeln fehlerhafter Bild-URLs mit einem onError-Fallback-Zustand

Netzwerkanfragen für Remote-Bilder können fehlschlagen, wenn Links fehlerhaft sind. Das Abfangen des standardmäßigen onError-Events ermöglicht es, Ladefehler zu erfassen und einen Zustand für ein sicheres Platzhalterbild zu setzen.

snippet.js

javascript

import { useState } from 'react';
 
export function AvatarImage({ src }) {
  const [hasError, setHasError] = useState(false);
  const fallbackSrc = '/images/placeholder.png';
 
  return (
    <img
      src={hasError ? fallbackSrc : src}
      alt="User profile"
      onError={() => setHasError(true)}
    />
  );
}

react

Erklärung

const [hasError, setHasError] = useState(false);

Verfolgt, ob bei der primären Bild-URL ein Ladefehler aufgetreten ist.

src={hasError ? fallbackSrc : src}

Setzt das src-Attribut dynamisch auf die Fallback-URL, falls ein Fehler aufgetreten ist.

onError={() => setHasError(true)}

Wird automatisch vom Browser ausgelöst, wenn das Bild nicht geladen werden kann, und aktualisiert den Zustand.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Behandeln fehlerhafter Bild-URLs mit einem onError-Fallback-Zustand

Verwandt