Replace Placeholder Images with Real Photos

Your AI agent or prototype generator spits out via.placeholder.com/800x400 images. The layout looks like a wireframe. You know the images need to be real but you don't want to manually find and download stock photos.

Here's a 10-line snippet that finds all placeholder images on a page and replaces them with real Unsplash photos:

document.querySelectorAll('img').forEach(async img => {
  if (!img.src.includes('placeholder')) return;
  const alt = img.alt || 'stock photo';
  const res = await fetch(
    'https://tteg-api-53227342417.asia-south1.run.app/search?q='
    + encodeURIComponent(alt) + '&n=1'
  );
  const data = await res.json();
  if (data.results?.length) img.src = data.results[0].image_url;
});

It uses the image's alt text as the search query. So <img alt="modern office" src="placeholder..."> becomes a real photo of a modern office.

Live demo

Before: placeholder images

Replace with real photos

How it works

tteg's API is free, requires no API key, and has CORS enabled so it works from any domain. It searches Unsplash and returns real image URLs. 50 queries per day per IP on the free tier.

The snippet above checks every <img> on the page, skips non-placeholder images, and uses the alt text to search for a matching real photo. One line of fetch, one line of replacement.

Use it in your build pipeline

For CLI-based workflows, tteg has a batch mode:

uv tool install tteg

tteg batch manifest.json
# manifest.json = [{"query": "startup office", "output": "./public/hero"}]

This saves real photos into your repo at build time, so there are no placeholder images in production.