Next.js image fallback
How to Handle Missing Images in Next.js
Next.js apps often render images from CMS data, ecommerce catalogs, user uploads, and remote APIs. fallback.pics gives you stable SVG placeholder URLs for missing image states.
Example URL
https://fallback.pics/api/v1/600x600?text=Product+Image Use a fallback URL when source data is missing
Before rendering an image, check whether the source exists. If it does not, use a fallback.pics URL that matches the expected dimensions.
const imageSrc =
product.imageUrl ||
"https://fallback.pics/api/v1/600x600?text=Product+Image";Handle failed loads in a client component
If remote images can fail after render, use a client component with local state and an error handler.
"use client";
import { useState } from "react";
export function SafeImage({ src, fallbackSrc, alt }) {
const [currentSrc, setCurrentSrc] = useState(src);
return <img src={currentSrc} alt={alt} onError={() => setCurrentSrc(fallbackSrc)} />;
}Choose placeholders by surface
Use product placeholders for commerce pages, avatar placeholders for account UI, skeleton placeholders for temporary loading states, and Image unavailable copy when a final asset cannot be displayed.
Use fallback.pics as your default missing-image URL in Next.js.
https://fallback.pics/api/v1/600x600?text=Product+Image