Snippet

Handling Broken Image URLs with an onError Fallback State

Network requests for remote images can fail if links break. Listening to the standard onError event lets you catch loading failures and update local state to display a safe fallback image placeholder.

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

Breakdown

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

Tracks whether the primary image URL encountered a load error.

src={hasError ? fallbackSrc : src}

Dynamically sets the source attribute to the fallback URL if an error occurred.

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

Triggered automatically by the browser when the image fails to load, triggering the state change.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Handling Broken Image URLs with an onError Fallback State

Related