Image

<img> with lazy loading, fade-in and an error fallback.

Import

import { Image } from '@marbleui/ui'

Props

<Image>

Prop	Type	Default	Description
fadeIn	`boolean`	`true`	Fade in once loaded, over a skeleton background.
fallback	`ReactNode`	`—`	Shown if the image fails to load.
radius	`'md' \| 'xl' \| 'full' \| 'none'`	`'md'`

Also accepts HTML element props (290).

Usage notes

img with lazy loading, fade-in and an error fallback. For a fixed ratio wrap it in AspectRatio; for a person’s photo use Avatar.

<Image src={src} alt="Mountain lake at sunset" className="h-56 w-96" radius="xl" fallback="Image unavailable" />

Always set alt (use alt="" for decorative images). It accepts standard img attributes.
fallback replaces the image with a box when loading fails. Without it, the broken image stays.
radius is none, md (default), xl or full. fadeIn is on by default and fades in on a sunken background; set fadeIn={false} to turn it off.
It defaults to loading="lazy"; override for above-the-fold images.

Example source · show

import { Image } from './image'

const src = 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&q=70'

export const styles = {
  Default: () => <Image src={src} alt="Mountain lake at sunset" className="h-56 w-96" radius="xl" />,
  Fallback: () => (
    <div className="flex gap-3">
      <Image src="https://example.invalid/missing.jpg" alt="Missing" className="h-32 w-44" fallback="Image unavailable" />
      <Image src={src} alt="" className="size-32" radius="full" />
    </div>
  ),
}

Source: packages/ui/src/image/image.tsx

Catalog