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


<p-image 
    src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" 
    alt="Image" 
    width="250" 
    [preview]="true" />

Indicator #

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/galleria10.jpg" 
    [preview]="true" 
    alt="Image" 
    width="250">
        <ng-template pTemplate="indicator">
            <i class="pi pi-check"></i>
        </ng-template>
</p-image>

Image Source #

In case that you want to show different image on preview, you can set previewImageSrc attribute. It could come handy when wanted to use smaller image version at first and bigger one on preview.


<p-image 
    src="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" 
    previewImageSrc="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" 
    alt="Image" 
    width="250" 
    [preview]="true" />

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.

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.

Image #

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

Properties #

Defines the input properties of the component.

name	type	default	description
imageClass	string	null	Style class of the image element.
imageStyle	Object	null	Inline style of the image element.
styleClass	string	null	Class of the element.
style	Object	null	Inline style of the element.
src	string \| SafeUrl	null	The source path for the main image.
srcSet	string \| SafeUrl	null	The srcset definition for the main image.
sizes	string	null	The sizes definition for the main image.
previewImageSrc	string \| SafeUrl	null	The source path for the preview image.
previewImageSrcSet	string \| SafeUrl	null	The srcset definition for the preview image.
previewImageSizes	string	null	The sizes definition for the preview image.
alt	string	null	Attribute of the preview image element.
width	string	null	Attribute of the image element.
height	string	null	Attribute of the image element.
loading	"eager" \| "lazy"	null	Attribute of the image element.
appendTo	any	null	Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
preview	boolean	false	Controls the preview functionality.
showTransitionOptions	string	150ms cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation
hideTransitionOptions	string	150ms cubic-bezier(0, 0, 0.2, 1)	Transition options of the hide animation

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onShow	value : any	Triggered when the preview overlay is shown.
onHide	value : any	Triggered when the preview overlay is hidden.
onImageError	event : Event	This event is triggered if an error occurs while loading an image file.

Templates #

Defines the templates used by the component.

name	parameters	description
indicator		Custom template of indicator.
rotaterighticon		Custom template of rotaterighticon.
rotatelefticon		Custom template of rotatelefticon.
zoomouticon		Custom template of zoomouticon.
zoominicon		Custom template of zoominicon.
closeicon		Custom template of closeicon.