Image

Displays a single image with preview and tranformation options.


import { Image } from 'primereact/image';
         

Image is used similar to the standard img element.

Image

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

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

Image

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

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

Image

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

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

Image

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

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-imageContainer element
p-image-preview-containerContainer element with preview enabled.
p-image-preview-indicatorMask layer over the image when hovered.
p-image-preview-iconIcon of the preview indicator.
p-image-maskPreview overlay container.
p-image-toolbarTransformation options container.
p-image-actionAn element inside the toolbar.
p-image-previewImage element inside the preview overlay.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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 previewButtonPropsyou 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.

KeyFunction
tabMoves focus through button bar.
enterActivates the button.
spaceActivates the button.
escCloses the image preview.
Visit the API documentation for detailed information about all the properties, events and methods of the component.