Placeholder Image API Documentation

<!-- Basic placeholder image -->
<img
  src="https://placeholderimage.co/600x400"
  width="600"
  height="400"
  alt="placeholder image"
/>

<!-- Custom color and text -->
<img
  src="https://placeholderimage.co/600x400/1c1c1e/22c55e?text=My+Project"
  width="600"
  height="400"
  alt="custom placeholder"
/>

// Standard img tag
function PlaceholderImg({ width = 600, height = 400 }) {
  return (
    <img
      src={`https://placeholderimage.co/${width}x${height}`}
      width={width}
      height={height}
      alt="placeholder image"
    />
  );
}

// With fallback on error
function SafeImg({ src, fallbackSize = "400x300" }) {
  return (
    <img
      src={src}
      onError={(e) => {
        e.target.src = `https://placeholderimage.co/${fallbackSize}`;
      }}
      alt="image"
    />
  );
}

import Image from 'next/image';

// Using as placeholder src
export default function Card() {
  return (
    <Image
      src="https://placeholderimage.co/600x400/0f172a/22c55e"
      width={600}
      height={400}
      alt="placeholder image"
    />
  );
}

// next.config.js — allow external domain
module.exports = {
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: 'placeholderimage.co',
    }],
  },
};

<template>
  <!-- Basic placeholder -->
  <img
    :src="`https://placeholderimage.co/${width}x${height}`"
    :width="width"
    :height="height"
    alt="placeholder image"
  />
</template>

<script setup>
defineProps({
  width: { type: Number, default: 600 },
  height: { type: Number, default: 400 },
});
</script>

/* Background placeholder image */
.placeholder-bg {
  background-image: url('https://placeholderimage.co/1200x400/EEEEEE/31343C.svg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 400px;
}

/* CSS-only skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

<!-- Placeholder with Tailwind -->
<img
  src="https://placeholderimage.co/800x400"
  class="w-full h-48 object-cover rounded-lg"
  alt="placeholder image"
/>

<!-- Responsive placeholder card -->
<div class="bg-gray-100 rounded-lg overflow-hidden">
  <img
    src="https://placeholderimage.co/600x400/EEEEEE/31343C"
    class="w-full aspect-video object-cover"
    alt="placeholder"
  />
  <div class="p-4">
    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
    <div class="h-3 bg-gray-200 rounded w-1/2"></div>
  </div>
</div>

// Basic network placeholder image
Image.network(
  'https://placeholderimage.co/400x300/1c1c2e/22c55e',
  width: 400,
  height: 300,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, progress) {
    if (progress == null) return child;
    return Container(
      color: Colors.grey[200],
      child: const Center(child: CircularProgressIndicator()),
    );
  },
)

<!-- app.component.html -->
<img
  [src]="'https://placeholderimage.co/' + width + 'x' + height"
  [attr.width]="width"
  [attr.height]="height"
  alt="placeholder image"
  (error)="onImgError($event)"
/>

<!-- app.component.ts -->
export class AppComponent {
  width = 600;
  height = 400;

  onImgError(event: Event) {
    (event.target as HTMLImageElement).src =
      'https://placeholderimage.co/400x300';
  }
}

<?php
// Functions.php — filter to add placeholder when no featured image
function placeholder_image_fallback($html, $post_id) {
    if (empty($html)) {
        $width  = 800;
        $height = 450;
        $html   = '<img src="https://placeholderimage.co/'
                . $width . 'x' . $height
                . '/EEEEEE/31343C" width="'
                . $width . '" height="' . $height
                . '" alt="placeholder image" />';
    }
    return $html;
}
add_filter('post_thumbnail_html', 'placeholder_image_fallback', 10, 2);
?>

<!-- Standard markdown image -->
![placeholder image](https://placeholderimage.co/600x400)

<!-- With custom color and text -->
![custom placeholder](https://placeholderimage.co/600x400/0f172a/22c55e?text=My+Blog)

<!-- GitHub README banner -->
![banner](https://placeholderimage.co/1200x300/1c1c1e/22c55e?text=Project+Name)

{% comment %} Product card with placeholder fallback {% endcomment %}
{% if product.featured_image %}
  <img
    src="{{ product.featured_image | img_url: '400x400' }}"
    alt="{{ product.title }}"
    width="400" height="400"
  />
{% else %}
  <img
    src="https://placeholderimage.co/400x400/f3f4f6/374151?text=No+Image"
    alt="{{ product.title }}"
    width="400" height="400"
  />
{% endif %}

import requests

# Fetch a PNG placeholder image
url = "https://placeholderimage.co/600x400/1c1c1e/22c55e.png"
response = requests.get(url)

with open("placeholder.png", "wb") as f:
    f.write(response.content)

print("Downloaded:", response.headers["Content-Type"])
# → image/png