Image

Image with aspect ratios and thumbhash placeholders

Installation

pnpm add @wandercom/design-system-web

Usage

import { Image } from '@wandercom/design-system-web/ui/image';

export function Example() {
  return (
    <Image src="https://images.unsplash.com/photo-123" alt="Description" />
  );
}

Thumbhash placeholder

Progressive loading with blurred placeholders:

<Image
  src="https://images.unsplash.com/photo-123"
  alt="Description"
  thumbhash="1QcSHQRnh493V4dIh4eXh1h4kJUI"
/>

Placeholder fades out when image loads.

Preview

Square

Loading example...
<Image
  aspectRatio="square"
  src="https://images.unsplash.com/photo-1613914049786-b7e3e8323348?w=600&dpr=2&q=80"
/>

Portrait

Loading example...
<Image
  aspectRatio="portrait"
  src="https://images.unsplash.com/photo-1613914049786-b7e3e8323348?w=600&dpr=2&q=80"
/>

Landscape

Loading example...
<Image
  aspectRatio="landscape"
  src="https://images.unsplash.com/photo-1613914049786-b7e3e8323348?w=600&dpr=2&q=80"
/>

Rounded Large

Loading example...
<Image
  rounded="lg"
  src="https://images.unsplash.com/photo-1613914049786-b7e3e8323348?w=600&dpr=2&q=80"
/>

Rounded Extra Large

Loading example...
<Image
  rounded="xl"
  src="https://images.unsplash.com/photo-1613914049786-b7e3e8323348?w=600&dpr=2&q=80"
/>

Props

aspectRatio

'square' | 'portrait' | 'landscape'
Aspect ratio constraint. 'square' (1:1), 'portrait' (3:4), 'landscape' (4:3).

rounded

'none' | 'lg' | 'xl'
border border-secondary radius. 'none' (0px), 'lg' (8px), 'xl' (12px). Defaults to 'lg'.

thumbhash

string
Thumbhash string for blurred placeholder while image loads.

asChild

boolean
Renders children and merges props.

className

string
Additional CSS classes.
Image