For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/image.md.
Leaf UI
  • English

      • Image

      Display images and explore galleries.

      Basic usage

      basic.tsx
      import { Flex, Image } from '@ifhover/leaf-ui';

import { withBase } from '@rspress/core/runtime';

export function ImageBasic() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Image src={withBase('/media/landscape-1.svg')} width={240} height={160} alt="Green valley" />
      <Image
        src="data:image/png;base64,invalid"
        width={140}
        height={160}
        alt="Failed image example"
        fallback={<span>No image</span>}
      />
    </Flex>
  );
}

      More examples

      advanced.tsx
      import { Flex, Image, ImagePreviewGroup } from '@ifhover/leaf-ui';

import { withBase } from '@rspress/core/runtime';

export function ImageGallery() {
  return (
    <ImagePreviewGroup thumbnails downloadable>
      <Flex gap="md" align="center" wrap justify="center">
        {[1, 2, 3].map((index) => (
          <Image
            key={index}
            src={withBase(`/media/landscape-${index}.svg`)}
            width={180}
            height={120}
            alt={`Landscape ${index}`}
          />
        ))}
      </Flex>
    </ImagePreviewGroup>
  );
}

      Usage

      Supports keyboard navigation, touch swiping, zoom, thumbnails and fullscreen. ImagePreviewGroup collects child Images or accepts items and controlled open / index. Use preview={false} for display-only images.

      Types

      Import these types for data, callbacks and refs.

      import type { ImagePreviewGroupProps, ImagePreviewItem, ImagePreviewProps, ImageProps } from '@ifhover/leaf-ui';

      ImagePreviewGroupProps API

      PropertyTypeDefaultDescription
      childrenReactNode—Content or child items
      itemsreadonly ImagePreviewItem[]—Images in display order
      openboolean—Controlled visibility
      defaultOpenbooleanfalseInitial visibility
      onOpenChange(open: boolean) => void—Open state changes
      indexnumber—Current index, starting at zero
      defaultIndexnumber0Initial index
      onIndexChange(index: number) => void—Active image changes
      thumbnailsbooleantrueThumbnail navigation
      downloadablebooleanfalseShow download action

      ImagePreviewItem API

      PropertyTypeDefaultDescription
      srcstringRequiredImage URL
      thumbnailSrcstring—Optional thumbnail URL; falls back to src
      altstring''Image description
      widthnumber—Width, numbers are in pixels
      heightnumber—Height, numbers are in pixels
      downloadstring | boolean—Download URL, or whether downloads are allowed
      downloadNamestring—Optional filename for the downloaded image

      ImagePreviewProps API

      PropertyTypeDefaultDescription
      itemsreadonly ImagePreviewItem[]RequiredImages in display order
      openbooleanRequiredControlled visibility
      indexnumber0Current index, starting at zero
      onClose() => voidRequiredCalled when closed
      onIndexChange(index: number) => void—Active image changes
      thumbnailsbooleantrueThumbnail navigation
      downloadablebooleanfalseShow download action

      ImageProps API

      PropertyTypeDefaultDescription
      previewbooleantrueAllow enlarged preview
      previewSrcstring—Higher-resolution preview URL
      fallbackReactNode—Loading error content
      fit'cover' | 'contain' | 'fill' | 'none' | 'scale-down''cover'Image fitting mode

      Image supports native image attributes such as src, alt, width, height, loading, onLoad and onError.