(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Image Displayer

Link to Figma: tba

Overview

• The Dynamic Image Displayer component shows images on a page.
• It supports different sizing and display strategies.
• Developers can set custom dimensions or let the component auto-size.
• Events allow interactions such as clicks and lifecycle handling.
• Visibility and authorization settings control when and for whom the image is shown.

...

• visibilityPolicySetId – Determines whether the component is displayed based on a policy set. This allows showing the image only to users with specific permissions. Example: "contentViewerPolicy".

Guidelines

[NO DATA AVAILABLE]

Accessibility

Usage

• Bind visual content with imageUrl (template expressions allowed) and always provide an appropriate alt.
• Choose an explicit sizing mode via resizeImageStrategy:
• fitToContainer for aspect-preserving photos/illustrations.
• useStaticSize with width/height for predictable thumbnails.
• useRealSize for pixel-accurate assets.
• fillWholeContent only when distortion is acceptable.
• Control when the component renders with displayConditions; restrict access with visibilityPolicySetId.

Sizing & Layout

• Prefer intrinsic sizing when appropriate using widthAuto / heightAuto.
• For fixed dimensions, pair resizeImageStrategy: "useStaticSize" with width and/or height.
• Preserve aspect ratio with resizeImageStrategy: "fitToContainer"; reserve "fillWholeContent" for deliberate stretch.
• Use paddingClass to add touch/click comfort around interactive images (ON_IMAGE_CLICK).
• Manage overflow with disableScrollbar: keep it false when content may exceed bounds (e.g., useRealSize).

Interactions & Events

• ON_IMAGE_CLICK: open a larger image, navigate, or emit analytics.

Visibility & Authorization

• Enforce role/permission gating with visibilityPolicySetId.
• Suppress empty/broken states with displayConditions (e.g., require non-empty imageUrl).
• Expose stable hooks for automation via id and dataTestId.

Content & Localization

• Provide meaningful alt for informative images; use empty alt ("") for decorative content.
• Use enableAsHotspot with localized guidedTourHotSpotTitle and guidedTourHotSpotDescription for guided tours.
• Keep displayName descriptive for authoring clarity (non-user-facing).

Accessibility

• Text alternatives: define alt text ascordingly.
• For interactive images, align alt phrasing with the ON_IMAGE_CLICK outcome (e.g., “Opens larger view”).
• Overflow access: set disableScrollbar: false when content may exceed bounds (e.g., with useRealSize).
• Aspect integrity: prefer resizeImageStrategy: "fitToContainer" when distortion would harm comprehension.
• Localization for guidance: when enableAsHotspot is true, supply translated guidedTourHotSpotTitle / guidedTourHotSpotDescription.
• Prevent empty graphics from being announced by gating display with displayConditions when imageUrl is missing.
• Improve hit comfort on touch by adding paddingClass around clickable imageryalt – Defines alternative text description for the image. This text is read by screen readers and shown if the image fails to load.