Img component for Stripe Apps
Display images with the Img UI component.
SDK version
To add an image to your app:
-
Import the Img component:
-
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:
Loading example...
<Img
src="https://images.example.com/small.svg"
width="50"
height="50"
alt="Small SVG image"
/>
<Img
src="https://images.example.com/medium.svg"
width="500"
height="500"
alt="Medium SVG image"
/>
<Img
src="https://images.example.com/large.svg"
width="1000"
height="1000"
alt="Large SVG image"
/>
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.
The example below uses the size attribute to define the maximum width of the specified image:
Loading example...
<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, the related setting, SVG, PNG, and the related setting.
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.
Loading example...
Remote sources
Both src and srcSet props can handle remote sources. Remember to adjust the image-src CSP setting in app-manifest to allow remote image sources.
Loading example...
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:
Loading example...
<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:
Loading example...
<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>