Img

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

SDK-Version

So fügen Sie Ihrer App ein Bild hinzu:

Img-Komponente importieren:

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

Nehmen Sie die Basis-URLs aller Bilder auf, die Sie in den Abschnitt image-src der content_security_policy in Ihrem App-Manifest aufnehmen.

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

<Img
  src="https://images.example.com/margin.svg"
  width="484"
  height="207"
  alt="Gross margin"
/>

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

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

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

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 Anwendungsszenarien wie Symbole und andere Wegweiser-Illustrationen. Sie müssen das Suffix des Bilds in die require- oder import-Anweisung einfügen.

const CommunityIcon = require('./community-icon.svg')
<Img
  width="75"
  height="75"
  src={CommunityIcon}
  alt="Community"
/>

Styling

You can achieve certain styling effects for Img components by wrapping them with a styled Box component.

Rahmen

To add a border to an Img, use the CSS keyline property, along with width and display to contain the image:

<Box
  css={{
    keyline: "critical",
    width: "fit",
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>

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:

<Box
  css={{
    borderRadius: 'rounded',
    overflow: 'hidden',
    width: 'fit',
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>

Img