February 1, 2025 • 7 min read
Placeholder Images in React and Next.js
Using placeholder images in React and Next.js is simple: use the placeholder URL as the src of an <img> or the Next.js Image component. This guide covers configuration, error fallbacks, and skeleton loading patterns.
Basic React img Tag
Use the placeholder URL directly in a React component:
function PlaceholderImg({ width = 600, height = 400 }) {
return (
<img
src={`https://placeholderimage.co/${width}x${height}`}
width={width}
height={height}
alt="placeholder image"
/>
);
}Next.js Image Component
Next.js requires external image domains to be allowlisted. Add PlaceholderImage.co in next.config.js:
// next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'placeholderimage.co',
pathname: '/**',
},
],
},
};Then use the Image component:
import Image from 'next/image';
export default function Card() {
return (
<Image
src="https://placeholderimage.co/600x400/0f172a/22c55e"
width={600}
height={400}
alt="placeholder image"
/>
);
}Error Fallback with onError
When the real image fails to load, swap in a placeholder:
function SafeImg({ src, fallbackSize = '400x300' }) {
return (
<img
src={src}
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = `https://placeholderimage.co/${fallbackSize}`;
}}
alt="image"
/>
);
}Skeleton Loader + Placeholder Fallback
Combine a loading skeleton with a placeholder image fallback for a polished UX:
function ProductImage({ src }) {
const [loading, setLoading] = useState(true);
const [failed, setFailed] = useState(false);
const displaySrc = failed ? `https://placeholderimage.co/400x400?text=No+Image` : src;
return (
<div className="relative aspect-square">
{loading && (
<div className="absolute inset-0 bg-gray-800 animate-pulse rounded" />
)}
<img
src={displaySrc}
alt="product"
className="w-full h-full object-cover"
onLoad={() => setLoading(false)}
onError={() => { setFailed(true); setLoading(false); }}
/>
</div>
);
}React Native Image.network
In React Native, use the placeholder URL with Image from react-native:
import { Image } from 'react-native';
<Image
source={{ uri: 'https://placeholderimage.co/400x300/1c1c2e/22c55e' }}
style={{ width: 400, height: 300 }}
resizeMode="cover"
/>FAQ
How do I use a placeholder image in React?
Use the placeholder URL as the src prop of an img tag or in Next.js Image component. Example: <img src="https://placeholderimage.co/600x400" width={600} height={400} alt="placeholder" />. For Next.js, add placeholderimage.co to remotePatterns in next.config.js.
Can I use Next.js Image with PlaceholderImage.co?
Yes. Add the domain to images.remotePatterns in next.config.js with protocol 'https' and hostname 'placeholderimage.co'. Then use <Image src="https://placeholderimage.co/600x400" width={600} height={400} alt="placeholder" />.
How do I add a fallback image when the main image fails in React?
Use the onError handler on img: onError={(e) => { e.currentTarget.src = 'https://placeholderimage.co/400x300'; }}. Set onerror to null first to avoid infinite loops if the fallback also fails.
What placeholder image size should I use for React Native?
Use dimensions that match your layout. Common sizes are 400x300 for cards, 200x200 for avatars. PlaceholderImage.co returns images with proper Cache-Control and CORS, so Image.network() in React Native works well.
Should I use a skeleton loader or a placeholder image in React?
Use a skeleton loader (shimmer/pulse) while the image is loading for better UX. Use a placeholder image as the fallback when the image fails to load or when the slot is empty (e.g. no profile photo).