---
title: Image
description: Embeds an image within the interface and controls its presentation. Use to visually illustrate concepts, showcase products, or support user tasks and interactions.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsmedia/image
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsmedia/image.md
---

# Image

Embeds an image within the interface and controls its presentation. Use to visually illustrate concepts, showcase products, or support user tasks and interactions.

## Properties

* id

  string

  A unique identifier for the element.

* inlineSize

  'fill' | 'auto'

  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.

* objectFit

  'contain' | 'cover'

  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.

* src

  string

  The image source, which should be a remote URL.

  When the image is loading or no `src` is provided, a placeholder will be rendered.

### Examples

* #### Code

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