Components

Image

Displays a static image

Overview

  • 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 contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.

A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, 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.