Image

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

  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

  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);
    },
  );