Image

A responsive image component with fallback support and various fitting options.

Anatomy

Import and assemble the component:

1import { Image } from "@raystack/apsara";
2

3<Image />

API Reference

Renders a responsive image with fallback support.

Prop

Type

Examples

Object Fit

Control how the image fills its container with different object-fit modes.

1<Flex gap="large" align="center">
2  <Image
3    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
4    alt="Nature landscape"
5    width={200}
6    height={150}
7    fit="contain"
8  />
9  <Image
10    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
11    alt="Nature landscape"
12    width={200}
13    height={150}
14    fit="cover"
15  />

Border Radius

Choose from different border radius styles to match your design.

1<Flex gap="large">
2  <Image
3    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
4    alt="Nature"
5    width={100}
6    height={100}
7    radius="none"
8  />
9  <Image
10    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
11    alt="Nature"
12    width={100}
13    height={100}
14    radius="small"
15  />

Fallback

Handle image loading failures gracefully with fallback images.

1<Flex gap="large">
2  <Image
3    src="invalid-image-url.jpg"
4    fallback="https://images.unsplash.com/photo-1447690709975-318628b14c57"
5    alt="With fallback"
6    width={200}
7    height={150}
8    fit="cover"
9    radius="medium"
10  />
11</Flex>

Accessibility

The Image component follows accessibility best practices:

ARIA Attributes

  • role="img": Explicitly defines the image role for assistive technologies
  • aria-label: Provides description matching alt text for screen readers
  • alt: Required alternative text description for screen readers

Performance

  • loading="lazy": Default lazy loading for better performance
  • decoding="async": Asynchronous image decoding to prevent blocking
  • Fallback support for failed image loads