Fix placeholder images in Bolt-generated pages

Bolt.new generates full-stack apps fast, but image tags point at placeholders or broken URLs. One CLI command replaces them with real Unsplash photos.

Symptom

You built an app with Bolt.new, exported the code, and the <img> tags point at:

Fix it right now

uv tool install tteg

# Replace each placeholder with a real photo:
tteg save "restaurant interior" ./public/hero --orientation landscape
tteg save "chef preparing food" ./public/about --orientation landscape
tteg save "happy customer dining" ./public/testimonial

Fill an entire Bolt page at once

If Bolt generated a full landing page with multiple image slots, fix them all in one pass:

cat > images.json << 'EOF'
[
  {"query": "modern restaurant interior", "output": "./public/hero", "orientation": "landscape"},
  {"query": "team of chefs cooking", "output": "./public/team", "orientation": "landscape"},
  {"query": "food plating close up", "output": "./public/feature-1"},
  {"query": "happy diners at table", "output": "./public/testimonial"}
]
EOF

tteg batch images.json

Use the HTTP API from Bolt directly

If you're still in Bolt's editor and want to reference real image URLs without downloading:

# Just paste this URL pattern into your img src:
https://tteg-api-53227342417.asia-south1.run.app/search?q=restaurant+interior&n=1

# Returns JSON with image_url you can use directly
# No API key. No headers. CORS enabled.

Before / after

Before (Bolt default)

<img
  src="https://source.unsplash.com/
       random/1200x800"
  alt="Hero"
/>

After (tteg)

<img
  src="/hero.jpg"
  alt="modern restaurant with
       warm ambient lighting"
/>

The ./public/hero.jpg is a real Unsplash photo committed to your repo. It loads reliably, matches your content, and has a descriptive alt attribute.

Bolt generates working code fast. The image problem is the last-mile gap between "demo" and "production." tteg closes that gap with one command per image or one batch for the whole page.

Related

tteg on GitHub →