# Composant Img pour les applications Stripe Affichez des images avec le composant d'interface utilisateur Img. # 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. Pour ajouter une image à votre application : 1. Importez le composant `Img` : ```js 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* (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). L’exemple ci-dessous montre l’aperçu d’une image avec la balise `Img` correspondante : ### Propriétés img | Propriété | Type | | ------------- | -------------------------------------------------------------------------------------- | | `alt` | (Facultatif) `string | undefined` Texte alternatif de l’image. | | `crossOrigin` | (Facultatif) `"anonymous" | undefined` Prise en charge cross-origin pour l’image. | | `height` | (Facultatif) `(string | number) | undefined` Hauteur de l’image. | | `sizes` | (Facultatif) `string | undefined` Dimensions de l’image (à utiliser avec srcSet). | | `src` | (Facultatif) `string | undefined` Source de l’image. | | `srcSet` | (Facultatif) `string | undefined` Ensemble de sources de l’image. | | `width` | (Facultatif) `(string | number) | undefined` Largeur de l’image. | ## SrcSet Vous pouvez utiliser `srcSet` pour les [images adaptatives](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). L’exemple suivant illustre l’utilisation de l’attribut `size` pour définir la largeur maximale d’une image spécifique : ## 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`. ## Styles Vous pouvez créer certains effets de style pour les composants `Img` en les incluant dans un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md). ### Bordures Pour ajouter une [bordure](https://docs.stripe.com/stripe-apps/style.md#borders) à un composant `Img`, utilisez les propriétés CSS `keyline`, `width` et `display` pour contenir l’image : ### 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 : # 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. Pour ajouter une image à votre application : 1. Importez le composant `Img` : ```js 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* (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). L’exemple ci-dessous montre l’aperçu d’une image avec la balise `Img` correspondante : ### Propriétés img | Propriété | Type | | ------------- | -------------------------------------------------------------------------------------- | | `alt` | (Facultatif) `string | undefined` Texte alternatif de l’image. | | `crossOrigin` | (Facultatif) `"anonymous" | undefined` Prise en charge cross-origin pour l’image. | | `height` | (Facultatif) `(string | number) | undefined` Hauteur de l’image. | | `sizes` | (Facultatif) `string | undefined` Dimensions de l’image (à utiliser avec srcSet). | | `src` | (Facultatif) `string | undefined` Source de l’image. | | `srcSet` | (Facultatif) `string | undefined` Ensemble de sources de l’image. | | `width` | (Facultatif) `(string | number) | undefined` Largeur de l’image. | ## SrcSet Vous pouvez utiliser `srcSet` pour les [images adaptatives](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). L’exemple suivant illustre l’utilisation de l’attribut `size` pour définir la largeur maximale d’une image spécifique : ## 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`. ## Styles Vous pouvez créer certains effets de style pour les composants `Img` en les incluant dans un composant [Box](https://docs.stripe.com/stripe-apps/components/box.md). ### Bordures Pour ajouter une [bordure](https://docs.stripe.com/stripe-apps/style.md#borders) à un composant `Img`, utilisez les propriétés CSS `keyline`, `width` et `display` pour contenir l’image : ### 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 : ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)