Guide section
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";Guide section
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";
import Image from "next/image";
export function SafeImage({ src, alt }) {
const fallbackSrc = "https://fallback.pics/api/v1/600x600?text=Product+Image";
const [currentSrc, setCurrentSrc] = useState(src || fallbackSrc);
return (
<Image
src={currentSrc}
width={600}
height={600}
alt={alt}
unoptimized
onError={() => {
if (currentSrc !== fallbackSrc) setCurrentSrc(fallbackSrc);
}}
/>
);
}Guide section
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. The currentSrc guard prevents repeated fallback state updates.
const fallbackBySurface = {
product: "https://fallback.pics/api/v1/600x600?text=Product+Image",
avatar: "https://fallback.pics/api/v1/avatar/200?text=JD",
banner: "https://fallback.pics/api/v1/banner/1200x400?text=Banner"
};