Img
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
dercontent_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" />
Props
Prop | Type | Description |
---|---|---|
alt |
| The alternative text of the image. |
crossOrigin |
| Cross-origin support for the image. |
height |
| The height of the image. |
sizes |
| The sizes of the image (for use with srcSet). |
src |
| The source of the image. |
srcSet |
| The source set of the image. |
width |
| The width of the image. |
SrcSet
Sie können ein srcSet
für responsive Bilder verwenden.
Das nachfolgende Beispiel verwendet die Eigenschaft 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 Nutzeroberflächen-Erweiterungscode 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
Sie können bestimmte Design-Effekte für Img
-Komponenten erzielen, indem Sie diese mit einer formatierten Box-Komponente umschließen.
Ränder
Um einem Img
einen Rahmen hinzuzufügen, verwenden Sie die CSS-Eigenschaft keyline
zusammen mit width
und display
, um das Bild einzuschließen:
<Box css={{ keyline: "critical", width: "fit", display: "grid", }} > <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', display: 'grid', }} > <Img src="https://images.example.com/margin.svg" width="484" height="207" alt="Gross margin" /> </Box>