Image
The image component displays visual content. Use images to showcase products, illustrate concepts, or provide visual context in POS workflows.
Images are display-only components. For interactive functionality, wrap them in button or clickable components.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Anchor to PropertiesProperties
Configure the following properties on the image component.
- Anchor to altaltaltstringstringDefault: `''`Default: `''`
An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an
s-image, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, thealtis displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read considerations when writing alternative text to learn more.- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSize'fill' | 'auto''fill' | 'auto'Default: 'fill'Default: 'fill'
The displayed inline width of the image.
fill: the image will takes up 100% of the available inline size.auto: the image will be displayed at its natural size.
Mobile surfaces: Always wrap your image in a box with a set width and height. ScrollViews on mobile have a dynamic height, which can cause images to appear inconsistently without defined dimensions.
- Anchor to objectFitobjectFitobjectFit'contain' | 'cover''contain' | 'cover'Default: 'contain'Default: 'contain'
Determines how the content of the image is resized to fit its container. The image is positioned in the center of the container.
- Anchor to srcsrcsrcstringstring
The image source, which should be a remote URL.
When the image is loading or no
srcis provided, a placeholder will be rendered.
Anchor to ExamplesExamples
Anchor to Display an imageDisplay an image
Display visual content using an image component with automatic loading optimization and error handling. This example shows a basic image with source URL and alt text for accessibility.Display an image
Display an image
Anchor to Best practicesBest practices
- Choose appropriate sizing: Use
inlineSize="fill"for responsive layouts. UseinlineSize="auto"to maintain natural dimensions. - Select object fit behavior: Use
objectFit="contain"to show the complete image. UseobjectFit="cover"to fill the container, accepting cropping. - Implement error handling and loading states: Image loading and caching behavior depends on the browser and network conditions—implement proper error handling and loading states for better user experience.
Anchor to LimitationsLimitations
Large images can impact performance—ensure proper optimization and compression for better loading times.