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/rapidkit

Usage

Import components from the package entrypoint.

import { Image } from '@rapidset/rapidkit';

Examples

Preview the component and copy the snippet.

Nature preview smallsm
Nature preview mediummd
Nature preview largelg

API Reference

Commonly used props at a glance.

PropDescription
srcSupplies the image URL when media is available.
altProvides the user-facing description required for non-decorative images.
sizeApplies a consistent small, medium, or large footprint.
loadingKeeps lazy loading enabled when media should wait until it nears the viewport.
srcSetSupports 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.