React Image

Description

Image Tag Rendering

React Image replaces the standard <img> tag with a React component and hook that support fallback sources when an image fails to load.

The component allows you to specify one or more fallback images for cases where the browser cannot load the original image. Additionally, you can provide any React element—such as a spinner—to display while the image is loading or if it fails to load. When using the hook, this behavior can be achieved by wrapping the component in <Suspense> and supplying the desired fallback prop.

Internally, React Image uses the useImage hook, which encapsulates all image‑loading logic. This hook works seamlessly with React Suspense, suspending rendering until the image has been downloaded and decoded by the browser.