Image
Data DisplayAn enhanced image component with loading states, error handling, and effects. Use this component for product images, galleries, or any image that benefits from loading feedback.
Import
import { Image, ZoomImage, ImageGallery } from "@/components/ui/image";Usage
Basic Image
Image with loading state
Aspect Ratios
Images with different aspect ratio constraints
Square
Video (16:9)
Wide (21:9)
Zoom on Hover
Image with zoom effect on hover
Error State
Image showing fallback on load error
API Reference
src*—stringImage source URL
alt*—stringAlt text for accessibility
aspectRatio"auto""auto" | "square" | "video" | "wide"Aspect ratio constraint
objectFit"cover""contain" | "cover" | "fill" | "none"How the image fills its container
radius"none""none" | "sm" | "md" | "lg" | "full"Border radius
showSkeletontruebooleanShow skeleton while loading
fallback—ReactNodeContent to show on error
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Image source URL |
alt* | string | — | Alt text for accessibility |
aspectRatio | "auto" | "square" | "video" | "wide" | "auto" | Aspect ratio constraint |
objectFit | "contain" | "cover" | "fill" | "none" | "cover" | How the image fills its container |
radius | "none" | "sm" | "md" | "lg" | "full" | "none" | Border radius |
showSkeleton | boolean | true | Show skeleton while loading |
fallback | ReactNode | — | Content to show on error |