Image

Displays an image with preview and tranformation options. For multiple image, see Galleria.

Basic

Preview and Zoom

Thumbnail

Import via Module


import { Image } from 'primereact/image';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/image/image.min.js"></script>

Getting Started

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

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

Thumbnail

Allow different images or sizes for source and preview images using zoomSrc property.

Templating

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


<Image src="image1.png" template="Preview Content" alt="Image Text" />

Properties

Image passes any valid attribute to the underlying img element, additional attribute is the following.

Name	Type	Default	Description
src	string	null	Specifies the path to the image.
preview	boolean	false	Controls the preview functionality.
zoomSrc	string	null	Zoomed image that may be different than "src" image.
downloadable	boolean	false	Adds a download button to the preview control menu.
imageStyle	any	null	Inline style of the image element.
imageClassName	string	null	Style class of the image element.

Events

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
onShow	-	Triggered when the preview overlay is shown.
onHide	-	Triggered when the preview overlay is hidden.
onError	event: Browser event	Triggered when the image fails to load.

Styling

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.