Image
Enhanced image component with lazy loading and required alt text.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Image } from '@adaptavant/eds-core';
Object Fit
Controls how an image is resized to fit its container.
<div className="grid gap-4 w-full grid-cols-2 [&>*]:aspect-square [&>*]:outline">
{/* Cover */}
<Image
alt="dog"
className="object-cover"
src="https://picsum.photos/id/237/200/300"
/>
{/* Contain */}
<Image
alt="dog"
className="object-contain"
src="https://picsum.photos/id/237/200/300"
/>
</div>
API Reference
Image
| Prop | Type | Description | Default |
|---|---|---|---|
alt | string | Defines an alternative text description of the image. | _ |
src | string | The image URL. | _ |
decoding? | 'sync' | 'async' | 'auto' | Indicates how the image is decoded. | _ |
height? | string | number | The intrinsic height of the image. | _ |
loading? | 'eager' | 'lazy' | Defines if the image should load immediately or defer until it is in view. | _ |
sizes? | string | A set of source size descriptors for the image for responsive behavior. | _ |
srcSet? | string | One or more image source URLs for different resolutions. | _ |
width? | string | number | The intrinsic width of the image. | _ |
onError? | (event: React.SyntheticEvent<HTMLImageElement, Event>) => void | The intrinsic width of the image. | _ |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Image parts
<Image
alt="dog"
className="object-cover"
src="https://picsum.photos/id/237/200"
className="w-20"
/>
No parts available. Only root.