# Img component for Stripe Apps

Display images with the Img UI component.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/img?app-sdk-version=8.

To add an image to your app:

1. Import the `Img` component:

```js
import {Img} from '@stripe/ui-extension-sdk/ui';
```

1. Include the base URLs of any images you include in the `image-src` section of the `content_security_policy` in your *app manifest* (In a Stripe App, the app manifest is a stripe-app.json file in your app's root directory. It defines your app's ID, views, permissions, and other essential properties).

The following shows a preview of an image with the respective `Img` tag below:

### Img props

| Property      | Type                                                                               |
| ------------- | ---------------------------------------------------------------------------------- |
| `alt`         | (Optional)
  `string | undefined`

  The alternative text of the image.            |
| `crossOrigin` | (Optional)
  `"anonymous" | undefined`

  Cross-origin support for the image.      |
| `height`      | (Optional)
  `(string | number) | undefined`

  The height of the image.           |
| `sizes`       | (Optional)
  `string | undefined`

  The sizes of the image (for use with srcSet). |
| `src`         | (Optional)
  `string | undefined`

  The source of the image.                      |
| `srcSet`      | (Optional)
  `string | undefined`

  The source set of the image.                  |
| `width`       | (Optional)
  `(string | number) | undefined`

  The width of the image.            |

## SrcSet

You can use `srcSet` for [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).

The example below uses the `size` attribute to define the maximum width of the specified image:

## Data URLs

You can co-locate images with your UI extension code and load them directly into the `Img` component. Supported formats are GIF, JPEG, SVG, PNG, and WEBP.

We recommend using SVG for most common use-cases like icons and other way finding illustrations. You must include the suffix of the image in the `require` or `import` statement.

## Styling

You can achieve certain styling effects for `Img` components by wrapping them with a styled [Box](https://docs.stripe.com/stripe-apps/components/box.md) component.

### Borders

To add a [border](https://docs.stripe.com/stripe-apps/style.md#borders) to an `Img`, use the CSS `keyline` property, along with `width` and `display` to contain the image:

### Rounded corners

To add rounded corners to an `Img`, use the CSS `borderRadius` property, along with `overflow`, `width`, and `display` to contain the image:


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/img?app-sdk-version=9.

To add an image to your app:

1. Import the `Img` component:

```js
import {Img} from '@stripe/ui-extension-sdk/ui';
```

1. Include the base URLs of any images you include in the `image-src` section of the `content_security_policy` in your *app manifest* (In a Stripe App, the app manifest is a stripe-app.json file in your app's root directory. It defines your app's ID, views, permissions, and other essential properties).

The following shows a preview of an image with the respective `Img` tag below:

### Img props

| Property      | Type                                                                               |
| ------------- | ---------------------------------------------------------------------------------- |
| `alt`         | (Optional)
  `string | undefined`

  The alternative text of the image.            |
| `crossOrigin` | (Optional)
  `"anonymous" | undefined`

  Cross-origin support for the image.      |
| `height`      | (Optional)
  `(string | number) | undefined`

  The height of the image.           |
| `sizes`       | (Optional)
  `string | undefined`

  The sizes of the image (for use with srcSet). |
| `src`         | (Optional)
  `string | undefined`

  The source of the image.                      |
| `srcSet`      | (Optional)
  `string | undefined`

  The source set of the image.                  |
| `width`       | (Optional)
  `(string | number) | undefined`

  The width of the image.            |

## SrcSet

You can use `srcSet` for [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).

The example below uses the `size` attribute to define the maximum width of the specified image:

## Data URLs

You can co-locate images with your UI extension code and load them directly into the `Img` component. Supported formats are GIF, JPEG, SVG, PNG, and WEBP.

We recommend using SVG for most common use-cases like icons and other way finding illustrations. You must include the suffix of the image in the `require` or `import` statement.

## Styling

You can achieve certain styling effects for `Img` components by wrapping them with a styled [Box](https://docs.stripe.com/stripe-apps/components/box.md) component.

### Borders

To add a [border](https://docs.stripe.com/stripe-apps/style.md#borders) to an `Img`, use the CSS `keyline` property, along with `width` and `display` to contain the image:

### Rounded corners

To add rounded corners to an `Img`, use the CSS `borderRadius` property, along with `overflow`, `width`, and `display` to contain the image:


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)