Source: https://primereact.org/image/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Image

Displays a single image with preview and tranformation options.

Import#

import { Image } from 'primereact/image';

Copy

Basic#

Image is used similar to the standard img element.

<Image src="/images/galleria/galleria7.jpg" alt="Image" width="250" />

Copy

Preview#

Enabling preview mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.

<Image src="/images/galleria/galleria10.jpg" alt="Image" width="250" preview />

Copy

Thumbnail#

Use the zoomSrc to select a higher resolution image to display in preview mode.

<Image src="/images/galleria/galleria14.jpg" zoomSrc="/images/galleria/galleria14.jpg" alt="Image" width="80" height="60" preview />

Copy

Template#

An eye icon is displayed by default when the image is hovered in preview mode. Use the indicatorIcon prop for custom content.

<Image src="/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />

Copy

Accessibility#

Screen Reader

The preview button is a native button element with an aria-label that refers to the aria.zoomImage property of the locale API by default, with _previewButtonProps_you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.

When preview is active, dialog role with aria-modal is applied to the overlay image container.

Button controls use aria.rotateRight, aria.rotateLeft, aria.zoomIn, aria.zoomOut and aria.close from the locale API as aria-label.

ButtonBar Keyboard Support

When preview is activated, close button receives the initial focus.

| Key | Function | | --- | --- | | tab | Moves focus through button bar. | | enter | Activates the button. | | space | Activates the button. | | esc | Closes the image preview. |

Import
Basic
Preview
Thumbnail
Template
Accessibility

PrimeReact 10.9.7 by PrimeTek