Image

Enhanced image component with lazy loading and required alt text.

Figma LibraryView in StorybookView in Playroom

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.

dogdog
<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>
View in Playroom

API Reference​

Image

PropDefaultDescription
alt_string
Defines an alternative text description of the image.
src_string
The image URL.
objectFit?_'contain' | 'cover'

⚠️ Deprecated, use object-fit utility classes instead.

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​

dog
<Image
    alt="dog"
    className="object-cover"
    src="https://picsum.photos/id/237/200"
    className="w-20"
  />
View in Playroom

No parts available. Only root.