Data

Image

Enhanced img element with error fallback, fixed aspect ratio, object-fit control, lazy loading and a full-screen preview lightbox with zoom.

Import

import { Image } from "@zephora/react";

Examples

Aspect ratio and fit

<Image
  src="/photos/landscape.jpg"
  alt="Purple abstract artwork"
  aspectRatio={16 / 9}
  fit="cover"
  radius={12}
  style={{ maxWidth: 320 }}
/>

Fallback

`fallback` renders instead of the image when loading fails.

<Image
  src="/broken.png"
  alt="Missing photo"
  aspectRatio={16 / 9}
  fallback={<Text muted>Image unavailable</Text>}
  style={{ maxWidth: 320 }}
/>

Preview lightbox

With `preview`, click (or Enter) opens a modal lightbox with zoom in/out and close controls.

<Image
  src="/photos/landscape.jpg"
  alt="Purple abstract artwork"
  preview
  radius={8}
  style={{ maxWidth: 240 }}
/>

API

Image props

Prop	Type	Default	Description
`src`	`string`	—	Image source URL.
`alt` *	`string`	—	Alternative text — required for accessibility.
`fallback`	`ReactNode`	—	Rendered instead of the image when it fails to load.
`aspectRatio`	`number`	—	Fixed width/height ratio applied to the wrapper (e.g. 16 / 9).
`fit`	`"cover" \| "contain" \| "fill"`	`"cover"`	Object-fit behavior.
`radius`	`number \| string`	—	Corner radius (px number or any CSS length).
`lazy`	`boolean`	`false`	Uses native loading="lazy".
`preview`	`boolean`	`false`	Click (or Enter) opens a full-screen lightbox with zoom controls.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Keyboard

Key	Action
`Enter / Space`	Opens the preview lightbox when `preview` is set.
`Escape`	Closes the preview lightbox (focus is trapped inside).