Img
Pour ajouter une image à votre application :
Importez le composant
Img
:import {Img} from '@stripe/ui-extension-sdk/ui'
Ajoutez les URL de base de chaque image que vous insérez dans la section
image-src
de lacontent_security_policy
du manifeste de votre application.
L’exemple ci-dessous montre l’aperçu d’une image avec la balise Img
correspondante :
<Img src="https://images.example.com/margin.svg" width="484" height="207" alt="Gross margin" />
Props
Prop | Type | Description |
---|---|---|
alt |
| The alternative text of the image. |
crossOrigin |
| Cross-origin support for the image. |
height |
| The height of the image. |
sizes |
| The sizes of the image (for use with srcSet). |
src |
| The source of the image. |
srcSet |
| The source set of the image. |
width |
| The width of the image. |
SrcSet
Vous pouvez utiliser srcSet
pour les images adaptatives.
L’exemple suivant illustre l’utilisation de l’attribut size
pour définir la largeur maximale d’une image spécifique :
<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" />
URL de données
Vous pouvez colocaliser des images avec le code d’extension de votre interface utilisateur et les charger directement dans la composante Img
. Voici les formats pris en charge : GIF, JPEG, SVG, PNG et WEBP.
Nous vous recommandons le format SVG pour les cas d’usage les plus courants tels que les icônes ou d’autres illustrations de résultats. Vous devez inclure le suffixe de l’image dans la déclaration require
ou import
.
const CommunityIcon = require('./community-icon.svg') <Img width="75" height="75" src={CommunityIcon} alt="Community" />
Stylisation
Vous pouvez créer certains effets de style pour les composants Img
en les wrappant dans un composant Box.
Bordures
Pour ajouter une bordure à un composant Img
, utilisez les propriétés CSS keyline
, width
et display
pour contenir l’image :
<Box css={{ keyline: "critical", width: "fit", display: "grid", }} > <Img src="https://images.example.com/margin.svg" width="484" height="207" alt="Gross margin" /> </Box>
Coins arrondis
Pour arrondir les coins d’un composant Img
, utilisez les propriétés CSS borderRadius
, overflow
, width
et display
pour contenir l’image :
<Box css={{ borderRadius: 'rounded', overflow: 'hidden', width: 'fit', display: 'grid', }} > <Img src="https://images.example.com/margin.svg" width="484" height="207" alt="Gross margin" /> </Box>