Guide section
A safer default for image failure
Images fail for normal reasons: deleted media, expired CDN URLs, missing product photos, bad imports, blocked third-party assets, and incomplete test data. A fallback image gives the UI a controlled state instead of a broken browser icon.
Guide section
Works with plain HTML and modern frameworks
Use fallback.pics directly in an onerror handler, a React onError callback, a Next.js image wrapper, or a design-system image component. Teams can standardize fallback behavior once and reuse it across product surfaces.
<img src="/product.jpg" onerror="this.onerror=null;this.src='https://fallback.pics/api/v1/600x400?text=Image+Unavailable'" alt="Product image" /> Guide section
Keep layouts stable
Dimensioned placeholder URLs help preserve the intended space so product grids, cards, avatars, banners, and docs keep their structure when real images are missing.