📄 primeng/image

File: image.md | Updated: 11/15/2025

Source: https://primeng.org/image

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

Image

Displays an image with preview and tranformation options.

Import #

import { ImageModule } from 'primeng/image';

Basic #

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 #

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" />

Template #

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>

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.

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

  • Template

  • Accessibility

PrimeBlocks

490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.

PrimeNG 20.3.0 by PrimeTek