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.
<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250"></p-image>
Indicator Template #
An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" [preview]="true" alt="Image" width="250">
<ng-template pTemplate="indicator">
<i class="pi pi-check"></i>
</ng-template>
</p-image>
Preview #
Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.
<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250" [preview]="true"></p-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 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.
| Key | Function |
|---|---|
| tab | Moves focus through button bar. |
| enter | Activates the button. |
| space | Activates the button. |
| esc | Closes the image preview. |
Image API
API defines helper props, events and others for the PrimeNG Image module.
Properties #
| Name | Type | Default | Description |
|---|---|---|---|
| preview | boolean | false | Controls the preview functionality. |
| style | any | null | Inline style of the element. |
| styleClass | string | null | Style class of the element. |
| imageStyle | any | null | Inline style of the image element. |
| imageClass | string | null | Style class of the image element. |
| src | string | SafeUrl | null | src attribute of the image element. |
| alt | string | null | alt attribute of the image element. |
| width | string | null | width attribute of the image element. |
| height | string | null | height attribute of the image element. |
Events #
| Name | Parameters | Description |
|---|---|---|
| onShow | - | Triggered when the preview overlay is shown. |
| onHide | - | Triggered when the preview overlay is hidden. |
| onImageError | event: Browser event | This event is triggered if an error occurs while loading an image file. |
Templates #
| Name | Parameters |
|---|---|
| indicator | - |
| rotaterighticon | - |
| rotatelefticon | - |
| zoomouticon | - |
| zoominicon | - |
| closeicon | - |