Image

A thin wrapper around <img> that adds radius, fit, and typed width/height props. Pass alt for accessibility.

Default

Mountain landscape
<Image src="..." alt="Mountain landscape" width={320} height={240} />

Radius

xs

sm

md

lg

xl

50%

<Image src="..." alt="" width={120} height={120} radius="xs" fit="cover" />
<Image src="..." alt="" width={120} height={120} radius="md" fit="cover" />
<Image src="..." alt="" width={120} height={120} radius="xl" fit="cover" />
<Image src="..." alt="" width={120} height={120} radius="50%" fit="cover" />

Object fit

contain

cover

fill

none

scale-down

<Image src="..." alt="" fit="contain" />
<Image src="..." alt="" fit="cover" />
<Image src="..." alt="" fit="fill" />
<Image src="..." alt="" fit="none" />
<Image src="..." alt="" fit="scale-down" />

Props

PropTypeDefaultDescription
srcstring—Image URL
altstring''Accessible description
widthnumber|string—Rendered width
heightnumber|string—Rendered height
fit'contain'|'cover'|'fill'|'none'|'scale-down'—CSS object-fit behavior
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Corner radius