Image

An Image opens a full-screen viewer on click, where you can zoom, rotate and flip it, and Esc closes it.

Put rounded-lg or rounded-full on classNames.root, so the image and its hover cover share the same corners.

Pass preview.src to show a different file in the viewer, so the thumbnail stays small and the full image loads only when opened.

Set preview={false} for a plain image with no viewer, like a logo or an avatar.

Control the viewer with preview.open and preview.onOpenChange, so a button can open it instead of the thumbnail.

Set preview.mask to { blur: true } to blur the page behind the open viewer, or to false for no backdrop at all.

Pass a node to preview.cover to replace the hover overlay, like an eye glyph with a label or the glyph alone.

Set preview.movable to false so a zoomed image stays centered and cannot be dragged.

Use scaleStep, minScale and maxScale in preview to set how far each zoom goes, or wheel: false to zoom only with the toolbar.

Use preview.imageRender to wrap the viewer's image, here with a download button in its top corner.

Use preview.actionsRender to keep the toolbar but pick its buttons, here zoom and rotate plus copy link and download.

Wrap images in Image.PreviewGroup so the viewer steps through all of them with next and previous buttons.

Pass items to Image.PreviewGroup so one thumbnail opens a viewer with the whole set, like a cover photo for an album.

Pass placeholder a progress object with your own percent to show a loading box, then render the image once it reaches 100.

Set placeholder={{ progress: true }} for a loading box that animates without a percent, to show until you render the image.

Pass fallback an image to show when src fails to load, like a gray Not found tile instead of a broken image.

Set loading="lazy" so the browser holds back images far down the page, with a placeholder showing until each one arrives.

A grid of photos in one Image.PreviewGroup, so any of them opens a viewer that steps through all eight.