# Bildkomponente für Stripe-Apps

Zeigen Sie Bilder mit der Img-Komponente der Nutzeroberfläche an.

# 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.

So fügen Sie Ihrer App ein Bild hinzu:

1. `Img`-Komponente importieren:

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

1. Nehmen Sie die Basis-URLs aller Bilder auf, die Sie in den Abschnitt `image-src` der `content_security_policy` in Ihrem *App-Manifest* (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) aufnehmen.

Im Folgenden sehen Sie eine Vorschau eines Bildes mit dem entsprechenden `Img`-Tag darunter:

### Bild-Eigenschaften

| Eigenschaft   | Typ                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------- |
| `alt`         | (Optional)
  `string | undefined`

  Der alternative Text des Bildes.                     |
| `crossOrigin` | (Optional)
  `"anonymous" | undefined`

  Geräteübergreifende Unterstützung für das Bild. |
| `height`      | (Optional)
  `(string | number) | undefined`

  Die Höhe des Bildes.                      |
| `sizes`       | (Optional)
  `string | undefined`

  Die Größe des Bildes (zur Verwendung mit srcSet).    |
| `src`         | (Optional)
  `string | undefined`

  Die Quelle des Bildes.                               |
| `srcSet`      | (Optional)
  `string | undefined`

  Der Quellsatz des Bildes.                            |
| `width`       | (Optional)
  `(string | number) | undefined`

  Die Breite des Bildes.                    |

## SrcSet

Sie können ein `srcSet` für [responsive Bilder](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) verwenden.

Das nachfolgende Beispiel verwendet das Attribut `size`, um die maximale Breite des angegebenen Bildes zu definieren:

## Daten-URLs

Sie können Bilder zusammen mit Ihrem Code für die Nutzeroberflächenerweiterung platzieren und sie direkt in die Komponente `Img` laden. Unterstützte Formate sind GIF, JPEG, SVG, PNG und WEBP.

Wir empfehlen die Verwendung von SVG für die gängigsten Use Cases wie Symbole und andere Wegweiser-Illustrationen. Sie müssen das Suffix des Bilds in die `require` oder `import`-Anweisung einfügen.

## Styling

Sie können bestimmte Design-Effekte für `Img`-Komponenten erzielen, indem Sie diese mit einer formatierten [Box](https://docs.stripe.com/stripe-apps/components/box.md)-Komponente umschließen.

### Rahmen

Um einem `Img` einen [Rahmen](https://docs.stripe.com/stripe-apps/style.md#borders) hinzuzufügen und das Bild einzuschließen, verwenden Sie die CSS-Eigenschaft `keyline` zusammen mit `width` und `display`:

### Abgerundete Ecken

Um einem `Img` abgerundete Ecken hinzuzufügen, verwenden Sie die CSS-Eigenschaft `borderRadius` zusammen mit `overflow`, `width` und `display`, um das Bild einzuschließen:


# 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.

So fügen Sie Ihrer App ein Bild hinzu:

1. `Img`-Komponente importieren:

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

1. Nehmen Sie die Basis-URLs aller Bilder auf, die Sie in den Abschnitt `image-src` der `content_security_policy` in Ihrem *App-Manifest* (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) aufnehmen.

Im Folgenden sehen Sie eine Vorschau eines Bildes mit dem entsprechenden `Img`-Tag darunter:

### Bild-Eigenschaften

| Eigenschaft   | Typ                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------- |
| `alt`         | (Optional)
  `string | undefined`

  Der alternative Text des Bildes.                     |
| `crossOrigin` | (Optional)
  `"anonymous" | undefined`

  Geräteübergreifende Unterstützung für das Bild. |
| `height`      | (Optional)
  `(string | number) | undefined`

  Die Höhe des Bildes.                      |
| `sizes`       | (Optional)
  `string | undefined`

  Die Größe des Bildes (zur Verwendung mit srcSet).    |
| `src`         | (Optional)
  `string | undefined`

  Die Quelle des Bildes.                               |
| `srcSet`      | (Optional)
  `string | undefined`

  Der Quellsatz des Bildes.                            |
| `width`       | (Optional)
  `(string | number) | undefined`

  Die Breite des Bildes.                    |

## SrcSet

Sie können ein `srcSet` für [responsive Bilder](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) verwenden.

Das nachfolgende Beispiel verwendet das Attribut `size`, um die maximale Breite des angegebenen Bildes zu definieren:

## Daten-URLs

Sie können Bilder zusammen mit Ihrem Code für die Nutzeroberflächenerweiterung platzieren und sie direkt in die Komponente `Img` laden. Unterstützte Formate sind GIF, JPEG, SVG, PNG und WEBP.

Wir empfehlen die Verwendung von SVG für die gängigsten Use Cases wie Symbole und andere Wegweiser-Illustrationen. Sie müssen das Suffix des Bilds in die `require` oder `import`-Anweisung einfügen.

## Styling

Sie können bestimmte Design-Effekte für `Img`-Komponenten erzielen, indem Sie diese mit einer formatierten [Box](https://docs.stripe.com/stripe-apps/components/box.md)-Komponente umschließen.

### Rahmen

Um einem `Img` einen [Rahmen](https://docs.stripe.com/stripe-apps/style.md#borders) hinzuzufügen und das Bild einzuschließen, verwenden Sie die CSS-Eigenschaft `keyline` zusammen mit `width` und `display`:

### Abgerundete Ecken

Um einem `Img` abgerundete Ecken hinzuzufügen, verwenden Sie die CSS-Eigenschaft `borderRadius` zusammen mit `overflow`, `width` und `display`, um das Bild einzuschließen:


## See also

- [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md)
- [App gestalten](https://docs.stripe.com/stripe-apps/style.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)