---
title: Image
description: >-
  The `Image` component adds visual content within the interface and allows you
  to customize the presentation of visuals. Use images to showcase products,
  illustrate concepts, provide visual context, or support user tasks and
  interactions in POS workflows.


  Images enhance the user experience by providing immediate visual recognition
  and reducing cognitive load.


  `Image` components handle loading errors gracefully with fallback options and
  provides placeholder states to maintain layout stability during image loading
  on slower network connections. The component implements lazy loading for
  images outside the viewport, improving initial page load performance while
  ensuring smooth scrolling as merchants navigate through product catalogs or
  image-heavy interfaces.
api_version: 2024-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/media-and-visuals/image
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/media-and-visuals/image.md
---

# Image

The `Image` component adds visual content within the interface and allows you to customize the presentation of visuals. Use images to showcase products, illustrate concepts, provide visual context, or support user tasks and interactions in POS workflows.

Images enhance the user experience by providing immediate visual recognition and reducing cognitive load.

`Image` components handle loading errors gracefully with fallback options and provides placeholder states to maintain layout stability during image loading on slower network connections. The component implements lazy loading for images outside the viewport, improving initial page load performance while ensuring smooth scrolling as merchants navigate through product catalogs or image-heavy interfaces.

## Properties

Configure the following properties on the `Image` component.

* src

  string

  The source of the image to be displayed.

### Examples

* #### Show an image

  ##### Description

  Show images within your extension interface with customizable presentation. This example demonstrates rendering images with proper sizing, loading states, and error handling, ideal for showcasing products, illustrating concepts, or providing visual context in POS workflows.

  ##### React

  ```tsx
  import React from 'react';

  import {
    Image,
    Screen,
    ScrollView,
    Navigator,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridModal = () => {
    return (
      <Navigator>
        <Screen name="Image" title="Image Example">
          <ScrollView>
            <Image src="example.png" />
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };

  export default reactExtension(
    'pos.home.modal.render',
    () => <SmartGridModal />,
  );
  ```

  ##### TS

  ```ts
  import {
    Navigator,
    Screen,
    ScrollView,
    Image,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.modal.render',
    (root, api) => {
      const image = root.createComponent(Image, {
        src: 'example.png',
      });

      const scrollView =
        root.createComponent(ScrollView);
      scrollView.append(image);

      const screen = root.createComponent(Screen, {
        name: 'Image',
        title: 'Image Example',
      });
      screen.append(scrollView);

      const navigator =
        root.createComponent(Navigator);
      navigator.append(screen);

      root.append(navigator);
    },
  );
  ```

## Preview

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

## Best practices

* **Plan for loading states:** The component automatically shows placeholders during loading or when no `src` is provided. Design your layouts to accommodate these loading states and ensure they don't negatively impact the user experience.
* **Consider responsive design:** Test your image layouts on various POS devices.

## Limitations

* Images are display-only components and don't support click events or interactive behaviors.
* Image loading and caching behavior depends on the browser and network conditions—implement proper error handling for better user experience.
* Large images can impact performance—ensure proper optimization and consider the device capabilities of your target POS hardware.