React image fallback
How to Add a React Image Fallback for Broken or Missing Images
React apps often depend on remote images from uploads, CMS entries, ecommerce catalogs, and third-party APIs. This guide shows how to replace failed image loads with a fallback.pics placeholder URL.
Example URL
https://fallback.pics/api/v1/600x400?text=Image+Unavailable Basic React image fallback
Use onError to swap the failed image source for a placeholder. Clear the error handler first to avoid a loop if the fallback URL is ever unavailable.
function ProductImage({ src, alt }) {
return (
<img
src={src}
alt={alt}
onError={(event) => {
event.currentTarget.onerror = null;
event.currentTarget.src =
"https://fallback.pics/api/v1/600x400?text=Product+Image";
}}
/>
);
}Create a reusable component
For production apps, put fallback behavior in one shared image component. That keeps product pages, profile cards, dashboards, and content previews consistent.
Use different fallbacks by context
Product images, avatars, banners, and article thumbnails should not all use the same message. Choose a fallback URL that matches the role of the image.
- Product: /api/v1/600x600?text=Product+Image
- Avatar: /api/v1/avatar/200?text=JD
- Banner: /api/v1/banner/1200x400
- Missing media: /api/v1/600x400?text=Image+Unavailable
Add a React fallback image today with a stable fallback.pics URL.
https://fallback.pics/api/v1/600x400?text=Image+Unavailable