Generate fallback images from predictable URLs.

<img
  src="https://fallback.pics/api/v1/800x450/18181B/FFFFFF?text=Product+Image"
  width="800"
  height="450"
  alt="Product image fallback"
/>

<img
  src="/catalog/product-4821.jpg"
  width="640"
  height="640"
  alt="Product image"
  onerror="this.onerror=null;this.src='https://fallback.pics/api/v1/640x640?text=Product+Image'"
/>

.product-card::before {
  background-image: url("https://fallback.pics/api/v1/600x400/F4F4F5/52525B?text=Loading");
}

export function fallbackImage(width, height, label) {
  const params = new URLSearchParams({ text: label });
  return `https://fallback.pics/api/v1/${width}x${height}?${params}`;
}

export function ProductImageFallback() {
  return (
    <img
      src="https://fallback.pics/api/v1/800x450/18181B/FFFFFF?text=Product+Image"
      width={800}
      height={450}
      alt="Product image fallback"
    />
  );
}

import Image from "next/image";

export function ProductPlaceholder() {
  return (
    <Image
      src="https://fallback.pics/api/v1/800x450/18181B/FFFFFF?text=Product+Image"
      width={800}
      height={450}
      alt="Product image fallback"
      unoptimized
    />
  );
}

export function BlogFeaturedImage() {
  const src = "https://fallback.pics/api/v1/thumbnail/1200x630?text=How+to+Fix+Broken+Images&style=soft&theme=purple&label=Guide";

  return <img src={src} width={1200} height={630} alt="Blog featured image" />;
}