Random Image Generator: Build It with JavaScript (Unsplash API + Picsum)

Need a random image generator that just works? This step-by-step build uses JavaScript to pull from Unsplash’s Random endpoint with a no-key Lorem Picsum fallback, then adds an AI mode that routes users to Perchance for funny AI generated images.

You can build a random image generator in under 15 minutes with vanilla JavaScript. This guide uses the fetch API to call Unsplash’s Random endpoint first, then falls back to Lorem Picsum with a seed parameter to avoid repeats. We will add alt text, lazy loading, light CORS handling, and an optional Perchance AI mode for funny AI generated images.

I reviewed and analysed common Unsplash and Picsum examples and combined them into a concise, resilient pattern that prevents immediate repeats and stays beginner friendly.

What Is a Random Image Generator?

A random image generator is a small JavaScript utility that fetches and displays an unpredictable image on each request, typically from APIs like the Unsplash API or placeholder services like Lorem Picsum. It outputs a URL into an img tag, updates alt text, and avoids repeats using in-memory or local storage tracking.

Who Is This For?

This guide is for beginner-to-intermediate developers who need dependable demo images, prototypes, landing pages, or creative prompt starters without spinning up a full backend. If you want quick control over sizes, alt text, and deduplication without big libraries, this pattern is for you.

How Do You Build a Random Image Generator with JavaScript?

✨Build AI Text to Image Generator in HTML CSS & JavaScript | AI Image API Project Tutorial

Follow these steps using vanilla JavaScript and the fetch API. I reviewed available examples for Unsplash and the repeat-blocking tricks popularized in simple JS tutorials, then refined them into one compact snippet that balances reliability and clarity.

<button id="btn">Surprise me</button>
<img id="photo" alt="Random image" loading="lazy" width="800" height="600" />
<p id="credit"></p>

const UNSPLASH_KEY = ''; // optional: add your key if you have one
const photoEl = document.getElementById('photo');
const creditEl = document.getElementById('credit');
const seen = new Set(JSON.parse(localStorage.getItem('seenIds') || '[]'));

async function fetchUnsplash() {
  if (!UNSPLASH_KEY) throw new Error('no-unsplash-key');

  const url = 'https://api.unsplash.com/photos/random?orientation=landscape&content_filter=high';
  const r = await fetch(url, {
    headers: { Authorization: `Client-ID ${UNSPLASH_KEY}` }
  });

  if (!r.ok) throw new Error('unsplash-failed');

  const d = await r.json();

  return {
    id: `u_${d.id}`,
    src: d.urls && d.urls.regular,
    alt: d.alt_description || `Photo by ${d.user && d.user.name} on Unsplash`,
    credit: d.user && d.user.name ? `Photo by ${d.user.name} on Unsplash` : 'Unsplash',
  };
}

function fetchPicsum() {
  const seed = Math.random().toString(36).slice(2, 10);

  return {
    id: `p_${seed}`,
    src: `https://picsum.photos/seed/${seed}/800/600`,
    alt: 'Random placeholder from Picsum',
    credit: 'Lorem Picsum',
  };
}

async function getRandomImage() {
  try {
    const img = await fetchUnsplash();

    if (!img.src || seen.has(img.id)) throw new Error('dup-or-missing');

    return img;
  } catch (e) {
    let img;

    do {
      img = fetchPicsum();
    } while (seen.has(img.id));

    return img;
  }
}

async function showImage() {
  const img = await getRandomImage();

  photoEl.src = img.src;
  photoEl.alt = img.alt;
  creditEl.textContent = img.credit;

  seen.add(img.id);
  localStorage.setItem('seenIds', JSON.stringify([...seen].slice(-50)));
}

document.getElementById('btn').addEventListener('click', showImage);
window.addEventListener('load', showImage);

How Do You Use Lorem Picsum With a Seed Fallback?

Lorem Picsum supports a seed parameter that returns a consistent image for a given seed. By generating a new seed with Math.random and slicing a short token, you get variety while still tagging each image with a unique ID for deduplication. This avoids obvious repeats without extra state.

How Do You Prevent Repeats in a Random Image Generator?

Avoiding repeats is a two-part job: in-memory de-duplication during a session and light persistence across reloads.

• Use a Set to track seen IDs: Unsplash photo IDs, or the Picsum seed.
• Use localStorage to persist a small rolling window, like the last 50 IDs.
• If needed, reset the Set after N clicks to keep memory small.

const seen = new Set(JSON.parse(localStorage.getItem('seenIds') || '[]'));

// After showing an image
seen.add(img.id);
localStorage.setItem('seenIds', JSON.stringify([...seen].slice(-50)));

What About Accessibility, Lazy Loading, and CORS?

• Alt text: Prefer Unsplash alt_description or a ‘Photo by Name on Unsplash’ fallback. For Picsum, use a generic but descriptive message.
• Lazy loading: Add loading=’lazy’ to defer offscreen images.
• CORS: Use direct image URLs in the img src. Both Unsplash and Picsum serve cross-origin images suitable for img tags. If you proxy or fetch blobs, configure CORS headers server-side.

How Do You Add an Optional AI Mode With Perchance?

If you want a playful AI option, add a toggle that routes users to Perchance AI for on-demand generations. This keeps your core JS generator intact while giving users an ‘AI’ button for funny ai generated images.

• Simple approach: open a new tab to Perchance’s image generator page and prefill a prompt in the UI instructions.
• Respect that Perchance is a browser tool; do not assume a public API.
• I reviewed a recent discussion about truly free, no-login tools, and the trade-off is clear: browser convenience can mean queues and variability, while local tools like Fooocus or ComfyUI remove limits but require hardware and setup. That aligns with what people search for under ‘ai image generator perchance’ and ‘how to create an ai’ workflow.

Example UI wiring:

document.getElementById('ai').addEventListener('click', () => {
  const idea = 'make a surreal cat in sunglasses, neon, 1980s poster';
  window.open('https://perchance.org/ai-text-to-image', '_blank');
  // Let users paste the idea manually; avoid scraping or automation.
});

Mid-article tip

• • Need production-ready visuals fast? Consider generating campaign visuals with VidAU AI Image. If you later want to turn assets into ad videos, try VidAU AI Video or automate from a page with URL to Video. For repurposing, see VidAU Vid Remix and for cleanup try Object Remover or Video Enhancer.

Common Mistakes and Quick Fixes

• Missing alt text: always set a descriptive fallback to keep pages accessible.
• No repeat protection: store IDs in a Set and localStorage to avoid déjà vu.
• Oversized images: pick sizes that match your layout; Picsum size params help.
• Ignoring errors: wrap Unsplash calls in try/catch and fall back to Picsum.
• CORS surprises: use direct image URLs in img src; avoid fetch-to-blob unless you manage headers.
• Slow initial paint: use loading=’lazy’ and render a low-contrast skeleton behind the image.

FAQ

Here are answers to common questions about random image generator builds, the Unsplash API, Lorem Picsum, localStorage repeat protection, alt text, CORS, Perchance AI image generation, funny AI generated images, and how to create an ai workflow with stricter control.