---
title: Image
description: >-
  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`](/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button)
  or
  [`Clickable`](/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/clickable)
  components.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media-and-visuals/image
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media-and-visuals/image.md
---

# 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`](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button) or [`Clickable`](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/clickable) components.

## Properties

Configure the following properties on the `Image` component.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

* inlineSize

  'fill' | 'auto'

  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.

* objectFit

  'contain' | 'cover'

  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.

* src

  string

  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.

### 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

  ```html
  <s-image src="example.png" inlineSize="auto" />
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/image-default.png)

## Best practices

* **Choose appropriate sizing:** Use `inlineSize="fill"` for responsive layouts. Use `inlineSize="auto"` to maintain natural dimensions.
* **Select object fit behavior:** Use `objectFit="contain"` to show the complete image. Use `objectFit="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.

## Limitations

Large images can impact performance—ensure proper optimization and compression for better loading times.