Placeholder Images for React, Next.js, and Flutter — Free Generator

Placeholder images in framework-based apps cause more headaches than they should. External services go down, data URLs break hot-reload, and test snapshots differ across environments. The cleanest solution: generate your placeholder once with our free tool, download the PNG, and commit it to your project. No API calls. No external dependencies. Deterministic output every time.

React — Using a Local PNG as a Placeholder Image

The most reliable placeholder in React is a local file that you import directly. Here is how to set it up:

1. Generate your placeholder at the right size (e.g., 400x300 for a card image)
2. Download as PNG and add it to src/assets/placeholder.png
3. Import it at the top of your component: import placeholder from '../assets/placeholder.png'
4. Use it as a fallback: src={product.imageUrl || placeholder}

This approach works with Create React App, Vite, and all major React bundlers. The image is bundled into your build, so it loads instantly without a network round-trip. Component tests that render the placeholder see a stable, predictable image every time.

For onError fallbacks, the pattern is: onError={(e) => e.target.src = placeholder}. This swaps in your placeholder whenever the real image URL returns a 404 or fails to load.

Next.js — Placeholder Images in the Image Component

Next.js has a built-in Image component that requires special handling for placeholders. There are two approaches:

Option 1 — Static import from the public folder: Drop your PNG into the public/ directory (e.g., public/images/placeholder.png). Reference it as src="/images/placeholder.png" in the Image component. Next.js serves files from public/ at the root with no additional config.

Option 2 — Blur placeholder with data URL: The Next.js Image component accepts a blurDataURL prop for a low-quality blur-up effect while the real image loads. You can use a data URL from our generator as that blur placeholder — generate a tiny 10x10 version in the matching color, copy the data URL, and pass it to blurDataURL.

For pages with many product images, the blur-up technique significantly reduces layout shift during the initial page load — important for Core Web Vitals scores.

Sell Custom Apparel — We Handle Printing & Free Shipping

Flutter — Asset-Based Placeholder Images

Flutter apps that fetch images from the internet need a placeholder to show while the image loads. The standard pattern uses a local asset:

1. Generate your placeholder at the right size for your widget
2. Save it to assets/images/placeholder.png
3. Declare it in pubspec.yaml under the assets section
4. Use it with Image.network(url, loadingBuilder: (ctx, child, progress) => progress == null ? child : Image.asset('assets/images/placeholder.png'))

For CachedNetworkImage (a popular Flutter package), pass placeholder: (context, url) => Image.asset('assets/images/placeholder.png') and Flutter handles the swap automatically.

Custom-colored placeholders that match your app's theme are better than white or black boxes during loading — they make transitions feel intentional rather than broken.

Placeholder Images in Angular and Bootstrap Projects

Angular apps use the same local-asset approach as React. Add your PNG to src/assets/, reference it as assets/placeholder.png in template files, and Angular CLI copies it to the build output automatically.

Bootstrap projects often use placeholder images in cards, carousels, and list groups. Bootstrap 5 removed its own built-in placeholder SVGs in favor of letting developers choose their own. Generate a placeholder at the card image dimensions (commonly 286x180 for a 3-column Bootstrap grid), download it, and place it in your static assets folder.

For Bootstrap carousels specifically, all slides should use the same image dimensions to prevent height jumping between slides. Generate all your placeholder images at the carousel dimensions before swapping in real content.

When to Use a Data URL Instead of a File

Data URLs embed the image data directly in your JavaScript or HTML string. This is useful when you cannot easily serve static files — for example, in a Storybook story, a Jest snapshot test, or an email template being generated server-side.

Use the Copy Data URL button in our generator and paste the resulting string as a constant in your codebase. Keep in mind that data URLs for large images produce very long strings — for anything bigger than 200x200, a local file is usually cleaner.

A compact 100x100 gray placeholder generates a data URL under 1KB — small enough to inline without impacting bundle size. See our guide to placeholder image URLs for more detail on data URL use cases.

Frequently Asked Questions

Can I use the data URL directly as an img src in React?

Yes. Assign the data URL string to a variable and pass it to the src prop. It behaves identically to a remote URL and works without any network access.

What size should I generate for a React card component placeholder?

Match the actual rendered size of your card image — typically 300x200 to 400x300 for a standard card. Using the correct aspect ratio prevents layout shift when real images load.

Can Next.js Image component use a data URL?

The blurDataURL prop in the Next.js Image component accepts a data URL as a blur-up placeholder. For the main src, use a static file in public/ rather than a data URL.

Does generating placeholder images require any backend?

No. All image creation runs in your browser with no server involvement. Download the PNG and commit it to your project for a fully self-contained placeholder.