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
Use cases
- Product images: Display images in catalogs and order details to help identify items.
- Marketing content: Show promotional banners or seasonal content for business information.
- Visual guidance: Provide instructions or onboarding content for complex processes.
- Branding: Display logos or store imagery to maintain brand consistency.
Anchor to examplesExamples
Anchor to example-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
Examples
Display an image
Description
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.
Default
<s-image src="example.png" inlineSize="auto" />
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 best-practicesBest practices
- Choose appropriate sizing: Use
for responsive layouts. Useto maintain natural dimensions. - Select object fit behavior: Use
to show the complete image. Useto 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.