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.
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.
return. post. action. render - pos.
return. post. block. render
Anchor to PropertiesProperties
Configure the following properties on the Image component.
- Anchor to idididstringstring
A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
- Anchor to inlineSizeinlineSizeinlineSize'fill' | 'auto''fill' | 'auto'Default: 'fill'Default: 'fill'
Controls the displayed width of the image. Choose based on your layout requirements. For mobile interfaces, consider using
'fill'with defined container dimensions to ensure consistent image display, as dynamic container heights can cause layout inconsistencies in scrollable views.'auto'- Displays the image at its natural size. The image will not render until it has loaded, and the aspect ratio will be ignored. Use for images where maintaining original dimensions is important.'fill'- Makes the image take up 100% of the available inline size. The aspect ratio will be respected and the image will take the necessary space. Use for responsive layouts and flexible image containers.
- Anchor to objectFitobjectFitobjectFit'contain' | 'cover''contain' | 'cover'Default: 'contain'Default: 'contain'
Controls how the image content is resized within its container.
'contain'- Scales the image to fit within the container while maintaining aspect ratio. The entire image will be visible, but there may be empty space. Use when showing the complete image is important.'cover'- Scales the image to fill the entire container while maintaining aspect ratio. Parts of the image may be cropped. Use when filling the container completely is more important than showing the entire image.
- Anchor to srcsrcsrcstringstring
The image source URL (remote URL or local file resource). When loading or no src is provided, a placeholder is rendered. Ensure URLs are properly formatted and properly formatted.
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.