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

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 #indicator>
        <i class="pi pi-search"></i>
    </ng-template>
    <ng-template #image>
        <img src="https://primefaces.org/cdn/primeng/images/galleria/galleria11.jpg" alt="image" width="250" />
    </ng-template>
    <ng-template #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	(klass: string) => any	null	Inline style of the image element.
styleClass	string	null	Class of the element.
style	(klass: string) => any	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	"lazy" \| "eager"	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
image.transition.duration	--p-image-transition-duration	Transition duration of root
image.preview.icon.size	--p-image-preview-icon-size	Icon size of preview
image.preview.mask.background	--p-image-preview-mask-background	Mask background of preview
image.preview.mask.color	--p-image-preview-mask-color	Mask color of preview
image.toolbar.position.left	--p-image-toolbar-position-left	Position left of toolbar
image.toolbar.position.right	--p-image-toolbar-position-right	Position right of toolbar
image.toolbar.position.top	--p-image-toolbar-position-top	Position top of toolbar
image.toolbar.position.bottom	--p-image-toolbar-position-bottom	Position bottom of toolbar
image.toolbar.blur	--p-image-toolbar-blur	Blur of toolbar
image.toolbar.background	--p-image-toolbar-background	Background of toolbar
image.toolbar.border.color	--p-image-toolbar-border-color	Border color of toolbar
image.toolbar.border.width	--p-image-toolbar-border-width	Border width of toolbar
image.toolbar.border.radius	--p-image-toolbar-border-radius	Border radius of toolbar
image.toolbar.padding	--p-image-toolbar-padding	Padding of toolbar
image.toolbar.gap	--p-image-toolbar-gap	Gap of toolbar
image.action.hover.background	--p-image-action-hover-background	Hover background of action
image.action.color	--p-image-action-color	Color of action
image.action.hover.color	--p-image-action-hover-color	Hover color of action
image.action.size	--p-image-action-size	Size of action
image.action.icon.size	--p-image-action-icon-size	Icon size of action
image.action.border.radius	--p-image-action-border-radius	Border radius of action
image.action.focus.ring.width	--p-image-action-focus-ring-width	Focus ring width of action
image.action.focus.ring.style	--p-image-action-focus-ring-style	Focus ring style of action
image.action.focus.ring.color	--p-image-action-focus-ring-color	Focus ring color of action
image.action.focus.ring.offset	--p-image-action-focus-ring-offset	Focus ring offset of action
image.action.focus.ring.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 #

Built-in Presets #

Preset	Implementation	Types
Aura	Aura	Aura
Lara	Lara	Lara
Nora	Nora	Nora
Material	Material	Material