Image

Displays an image with preview and tranformation options.

Import #


import { Image } 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" />

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/galleria11.jpg" [preview]="true" alt="Image" width="250">
    <ng-template pTemplate="indicator">
        <i class="pi pi-search"></i>
    </ng-template>
    <ng-template pTemplate="image">
        <img src="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" alt="image" width="250" />
    </ng-template>
    <ng-template pTemplate="preview" let-style="style" let-previewCallback="previewCallback">
        <img src="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" alt="image" [style]="style" (click)="previewCallback()" />
    </ng-template>
</p-image>

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.

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

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.

name	parameters	description
indicator		Custom template of indicator.
image	context : { class: any, // Style class of the image element. style: any, // Style of the image element. errorCallback: Function, // Image click function. }	Custom template of image.
preview	context : { errorCallback: Function, // Preview click function. }	Custom preview template.
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.

class	description
p-image	Class name of the root element
p-image-preview-mask	Class name of the preview mask element
p-image-preview-icon	Class name of the preview icon element
p-image-mask	Class name of the mask element
p-image-toolbar	Class name of the toolbar element
p-image-rotate-right-button	Class name of the rotate right button element
p-image-rotate-left-button	Class name of the rotate left button element
p-image-zoom-out-button	Class name of the zoom out button element
p-image-zoom-in-button	Class name of the zoom in button element
p-image-close-button	Class name of the close button element
p-image-original	Class name of the original element

token	variable	description
root.transitionDuration	--p-image-transition-duration	Transition duration of root
icon.size	--p-image-preview-icon-size	Icon size of preview
mask.background	--p-image-preview-mask-background	Mask background of preview
mask.color	--p-image-preview-mask-color	Mask color of preview
position.left	--p-image-toolbar-position-left	Position left of toolbar
position.right	--p-image-toolbar-position-right	Position right of toolbar
position.top	--p-image-toolbar-position-top	Position top of toolbar
position.bottom	--p-image-toolbar-position-bottom	Position bottom of toolbar
toolbar.blur	--p-image-toolbar-blur	Blur of toolbar
toolbar.background	--p-image-toolbar-background	Background of toolbar
toolbar.borderColor	--p-image-toolbar-border-color	Border color of toolbar
toolbar.borderWidth	--p-image-toolbar-border-width	Border width of toolbar
toolbar.borderRadius	--p-image-toolbar-border-radius	Border radius of toolbar
toolbar.padding	--p-image-toolbar-padding	Padding of toolbar
toolbar.gap	--p-image-toolbar-gap	Gap of toolbar
action.hoverBackground	--p-image-action-hover-background	Hover background of action
action.color	--p-image-action-color	Color of action
action.hoverColor	--p-image-action-hover-color	Hover color of action
action.size	--p-image-action-size	Size of action
action.iconSize	--p-image-action-icon-size	Icon size of action
action.borderRadius	--p-image-action-border-radius	Border radius of action
focusRing.width	--p-image-action-focus-ring-width	Focus ring width of action
focusRing.style	--p-image-action-focus-ring-style	Focus ring style of action
focusRing.color	--p-image-action-focus-ring-color	Focus ring color of action
focusRing.offset	--p-image-action-focus-ring-offset	Focus ring offset of action
focusRing.shadow	--p-image-action-focus-ring-shadow	Focus ring shadow of action

Image

Import #

Basic #

Preview #

Template #

Accessibility #

Screen Reader

ButtonBar Keyboard Support

Image API

Image #

Properties #

Emitters #

Templates #

Image Theming

CSS Classes #

Image Design Tokens #