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

The Image component displays responsive images with support for object-fit modes, border radius styles, and fallback handling.

Install the component from your command line.

npm install @raystack/apsara

import { Image } from '@raystack/apsara/v1'

<Image 
  src="/path/to/image.jpg"
  alt="Description"
  width={300}
  height={200}
  fit="cover"
/>

The Image component accepts the following props:

src: The URL of the image to display
alt: Alternative text description (required)
fit: Object-fit property ("contain" | "cover" | "fill", default: "cover")
radius: Border radius style ("none" | "small" | "medium" | "full", default: "none")
fallback: URL of fallback image to show on error
width: Width of the image (string | number)
height: Height of the image (string | number)
className: Additional CSS class names
All standard HTML img attributes

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

Choose from different border radius styles to match your design.

Handle image loading failures gracefully with fallback images.

The Image component follows accessibility best practices: