UI component
Image
Image renders avatars and small media with consistent sizing and a reliable fallback when the source is missing or fails.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Image } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| src | Supplies the image URL when media is available. |
| alt | Provides the user-facing description required for non-decorative images. |
| size | Applies a consistent small, medium, or large footprint. |
| loading | Keeps lazy loading enabled when media should wait until it nears the viewport. |
| srcSet | Supports responsive images when you have multiple asset sizes available. |
Accessibility
The component forwards alt text to the native image element so the same accessibility expectations apply as with any standard img tag.
Optional access rules
Optional access rules let images stay hidden when the current user should not see them, while keeping the component itself presentational.