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. |
None.