Workspace / Components

Image

Displays a static image

Overview

  • Release version
    Zurich
  • Available sinceQuebec
  • A11Y WCAG 2.1 AA

Image displays a static image for additional context, or for adding a visual representation of your content.

ServiceNow link
Image code documentation

UIB and developer guidance

Figma link
Image Figma component

Figma library with components for designing Workspace.

Loading playground

When to use

Use image to complement your content, explain complex ideas visually, or make your pages more engaging. They're essential for stories, explanations, and branding.

When not to use

Avoid using images if they're irrelevant or low quality. Make sure every image serves a purpose and enhances the user experience.

Anatomy

Anatomy of the image component
  1. Container: Holds the image

Usage

Use the image component to place static images in your page.

Configurations

Learn how to customize image by configuring the available properties.

Plugin

To use this component, you must activate the com.servicenow_now_image plugin on your ServiceNow instance.

Presets and controllers

This component has a preset configuration that sets properties and event handlers, making it ready for use. You can override preset values with a custom configuration if needed. Preset values won’t upgrade with updates. To avoid using presets, configure manually. One preset can apply to a single component instance. See presets for more info.

A preset is linked to a controller, which serves as a data resource. Controllers provide configuration data and event bindings for the component. Selecting a preset adds the required controller to the page, allowing new components to use its preset. For more on controllers, see controllers. For default presets, see view properties and events in the controller API.

Select the image

Provide the URL to the image. Any file type using the <img> element that is supported by web browsers is acceptable. Newer formats such as WebP and AVIF have better performance than the older PNG, JPEG, and GIF file formats.

Fit the image

Configure how you want the image to fit into it’s container. This is necessary when the height and width of the container differ from the image's dimensions. Be aware that your choice could affect the proportions of your image unless you fit it to scale.

Positioning the image

You can position the image in the center of the container (default) or align it to any of the corners.

Design recommendations

  • Display images at their intended aspect ratio to avoid distortion
  • Size the image to fit the desired display. The image should not appear blurry or pixelated
  • Be sensitive to load times, keep resolutions minimal when possible
  • Provide alternative text or a caption to ensure accessibility
  • Use context-relevant images
  • Provide a focal point and avoid images that require the user to search for the meaning

Usability

Image complies with all internationalization and accessibility requirements.

Accessibility

Learn how to access the actionable elements of image through screen readers.

Keyboard interactions

Arrow up, Arrow down, Arrow left, Arrow right: Used to access and read the ALT text attached to the image when the screen reader is in browse/read mode.
Note: Because the image component has no actionable elements in it, the tab key can’t select the component.

Screen readers

Screen readers can access the image component using browse/read mode.