Image

Display images with preview and fallback support.

Import

import { Image } from 'asterui'

Examples

Basic Image

Simple image display with src and alt props.

</>

import { Image } from 'asterui'

function App() {
  return (
      <Image
        src="/valley.png"
        alt="Landscape"
        width={400}
        height={300}
      />
    )
}

export default App

Different Sizes

Images with various dimensions.

</>

import { Image, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center">
        <Image
          src="/valley.png"
          alt="Small"
          width={100}
          height={100}
        />
        <Image
          src="/valley.png"
          alt="Medium"
          width={200}
          height={150}
        />
        <Image
          src="/valley.png"
          alt="Large"
          width={300}
          height={200}
        />
      </Space>
    )
}

export default App

Image Preview

Click image to preview in full size.

</>

import { Image } from 'asterui'

function App() {
  return (
      <Image
        src="/valley.png"
        alt="Landscape with preview"
        width={400}
        height={300}
        preview
      />
    )
}

export default App

Fallback Image

Display fallback image when source fails to load.

</>

import { Image, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md">
        <Image
          src="/does-not-exist.png"
          alt="Broken image"
          width={200}
          height={150}
          fallback="/valley.png"
        />
      </Space>
    )
}

export default App

API

Image

Property	Description	Type	Default
src	Image source URL	string	-
alt	Alternative text for the image	string	''
width	Image width	number | string	-
height	Image height	number | string	-
preview	Enable click to preview image in lightbox	boolean	true
fallback	Fallback image URL when source fails to load	string	-
placeholder	Placeholder content shown while loading	React.ReactNode	-
onLoad	Callback when image loads successfully	() => void	-
onError	Callback when image fails to load	() => void	-
className	Additional CSS classes	string	-
style	Inline styles	React.CSSProperties	-

Accessibility

• Always provide meaningful alt text for screen readers
• Use fallback images to ensure content is always visible
• Preview is keyboard accessible: press Enter or Space to open, Escape to close
• Previewable images have role="button" with appropriate aria-label
• Preview modal has role="dialog" and aria-modal="true"
• Error state includes aria-label describing the failure