Preview

Sample image

Installation

<> import.ts
import { Image } from "@/components/ui/image"

Code

<> component.tsx
import Image from "@/components/ui/image"

<Image />

API Reference

Image

An image component with standard HTML img attributes and additional props.

<> import.ts
import { Image } from "@/components/ui/image"

Props

PropTypeDefaultDescription
src
string—Image source URL
alt
string—Alt text for accessibility
width
number | string—Image width
height
number | string—Image height
className
string""Additional CSS classes
loading
"lazy" | "eager""lazy"Image loading strategy
objectFit
"contain" | "cover" | "fill" | "none" | "scale-down"—Object fit CSS property
objectPosition
string—Object position CSS property
onLoad
(e: React.SyntheticEvent<HTMLImageElement, Event>) => void—Called when image loads
onError
(e: React.SyntheticEvent<HTMLImageElement, Event>) => void—Called when image fails to load

Examples

Example 1
<> example.tsx
// Basic
<Image src="/image.jpg" alt="Description" width={400} height={300} />
Example 2
<> example.tsx
// With styling
<Image 
  src="/image.jpg" 
  alt="Description" 
  width={400} 
  height={300} 
  className="rounded-lg object-cover" 
/>
Example 3
<> example.tsx
// Lazy loading
<Image 
  src="/image.jpg" 
  alt="Description" 
  width={400} 
  height={300} 
  loading="lazy" 
/>