Bildkomponente für Stripe-Apps

So fügen Sie Ihrer App ein Bild hinzu:

1. Img-Komponente importieren:

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

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

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

Bild-Eigenschaften

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.

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

Styling

Sie können bestimmte Design-Effekte für Img-Komponenten erzielen, indem Sie diese mit einer formatierten Box-Komponente umschließen.

Rahmen

Um einem Img einen Rahmen hinzuzufügen und das Bild einzuschließen, verwenden Sie die CSS-Eigenschaft keyline zusammen mit width und display:

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

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/gross-margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>