Image

Displays a single image with preview and tranformation options.

Import #


import Image from 'primevue/image';

Basic #

Image is used similar to the standard img element.



<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />

Preview #

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



<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />

Template #

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



<Image alt="Image" preview>
    <template #indicatoricon>
        <i class="pi pi-check"></i>
    </template>
    <template #image>
        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
    </template>
    <template #preview="slotProps">
        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
    </template>
</Image>

Style #

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

Name	Element
p-image	Container element.
p-image-preview-container	Container element with preview enabled.
p-image-preview-indicator	Mask layer over the image when hovered.
p-image-preview-icon	Icon of the preview indicator.
p-image-mask	Preview overlay container.
p-image-toolbar	Transformation options container.
p-image-action	An element inside the toolbar.
p-image-preview	Image element inside the preview overlay.

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.