# Image

The image component displays an image to a merchant in Shopify POS.

```tsx
import React from 'react';

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

const SmartGridModal = () => {
  return (
    <Navigator>
      <Screen name="Image" title="Image Example">
        <ScrollView>
          <Image src="example.png" size="s" />
          <Box blockSize="600px" inlineSize="600px" padding="400">
            <Image src="example.png" size="cover" />
          </Box>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

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

```

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

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

  const filledImage = root.createComponent(Image, {
    src: 'example.png',
    size: 'cover',
  });

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

  const box = scrollView.createComponent(Box, {
    blockSize: '600px',
    inlineSize: '600px',
    padding: '400',
  });

  box.append(filledImage);
  scrollView.append(box);

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

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

  root.append(navigator);
});

```

## Image

### ImageProps

### size

value: `ImageSize | FillResizeMode`

The size or fill size of the image.

### src

value: `string`

The source of the image to be displayed.