Composant Img pour les applications Stripe

Pour ajouter une image à votre application :

1. Importez le composant Img :

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

1. Ajoutez les URL de base de chaque image que vous insérez dans la section image-src de la content_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/gross-volume.svg"
  width="484"
  height="207"
  alt="Gross volume"
/>

Propriétés img

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.

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" />
)

Styles

Vous pouvez créer certains effets de style pour les composants Img en les incluant 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',
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/gross-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',
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/gross-margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>