import Image from 'primevue/image';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/image/image.min.js"></script>
Image is used as the native img element and supports all properties that the native element has.
<Image src="image1.png" alt="Image Text" />
Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.
An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
<Image src="image1.png" alt="Image Text">
<template #indicator>
Preview Content
</template>
</Image>
Image passes any valid attribute to the underlying img element, additional attribute is the following.
| Name | Type | Default | Description |
|---|---|---|---|
| preview | boolean | false | Controls the preview functionality. |
| imageStyle | any | null | Inline style of the image element. |
| imageClass | string | null | Style class of the image element. |
Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.
| Name | Parameters | Description |
|---|---|---|
| show | - | Triggered when the preview overlay is shown. |
| hide | - | Triggered when the preview overlay is hidden. |
| error | - | Triggered when an error occurs while loading an image file. |
| Name | Parameters |
|---|---|
| indicator | - |
Following is the list of structural style classes, for theming classes visit
| 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. |
The preview button is a native button element with an aria-label that refers to the aria.zoomImage property of the
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
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. |
None.