Img component for Stripe Apps

To add an image to your app:

1. Import the Img component:

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.

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

<Img
  src="https://images.example.com/gross-volume.svg"
  width="484"
  height="207"
  alt="Gross volume"
/>

Img props

SrcSet

You can use srcSet for responsive images.

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

<Img
  srcSet="https://images.example.com/daily-sales.jpg 480w, https://images.example.com/daily-sales-large.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  width="484"
  height="207"
  alt="Daily sales"
/>

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.

import {Img} from '@stripe/ui-extension-sdk/ui';
import CommunityIcon from './community-icon.svg';

const DataURl = () => (
  <Img width="75" height="75" src={CommunityIcon} alt="Community" />
)

Styling

You can achieve certain styling effects for Img components by wrapping them with a styled Box component.

Borders

To add a border to an Img, use the CSS keyline property, along with width and display to contain the image:

<Box
  css={{
    keyline: 'critical',
    width: 'fit',
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/gross-margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>

Rounded corners

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

<Box
  css={{
    borderRadius: 'rounded',
    overflow: 'hidden',
    width: 'fit',
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/gross-margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>