Skip to main content

​
Image

The Image component displays external images with support for sizing presets, border radius, and object fit modes.

​
Usage

<Image 
  src="https://example.com/photo.jpg" 
  alt="Description" 
  size="md" 
/>

​
Props

​
src
string
required
Source URL of the image.
​
alt
string
Alternative text for accessibility.
​
size
string | number
Size preset (xs, sm, md, lg, xl) or numeric pixel value. Affects both width and height unless overridden.
​
width
string | number
Specific width.
​
height
string | number
Specific height.
​
radius
string | number
default:"md"
Border radius. Presets: none, sm, md, lg, xl, full.
​
fit
string
default:"cover"
Object fit mode: cover, contain, fill.
​
flush
boolean
default:"false"
Removes border radius and margin, useful for card headers.

​
Examples

​
Avatar

<Image 
  src={user.avatar} 
  size="md" 
  radius="full" 
/>

​
Card Banner

<Image 
  src={post.image} 
  height={200} 
  width="100%" 
  flush 
/>