Image

Displays an image with preview and tranformation options.


import { ImageModule } from 'primeng/image';

Image is used as the native img element and supports all properties that the native element has. For multiple image, see Galleria.

Image

<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" />

Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.

Image

<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true" />

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

image

<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" [preview]="true" alt="Image" width="250">
    <ng-template #indicator>
        <i class="pi pi-search"></i>
    </ng-template>
    <ng-template #image>
        <img src="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" alt="image" width="250" />
    </ng-template>
    <ng-template #preview let-style="style" let-previewCallback="previewCallback">
        <img src="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" alt="image" [style]="style" (click)="previewCallback()" />
    </ng-template>
</p-image>

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.

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.
Summer Sale 2025
SUMMER SALE2025
Use coupon code PRSM25 at checkout to get 50% OFF everything in PrimeStore and PrimeBlocks.
Learn More