Free Placeholder Image
Generator & API

<!-- 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>