image.mdx

title	Image
description	Display images with optional fallback

import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';

Image

Display images with optional fallback

Examples

<ComponentDemo schema={{ type: "image", src: "https://via.placeholder.com/300x200", alt: "Placeholder" }} title="Basic Image" />

<ComponentDemo schema={{ type: "image", src: "https://via.placeholder.com/400x300", width: 200, height: 150, alt: "Sized Image" }} title="With Sizing" />

Schema

interface ImageSchema {
  type: 'image';
  src: string;
  alt?: string;
  width?: number | string;
  height?: number | string;
  fallback?: string;
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
}