Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Umsatz
Plattformen und Marktplätze
Geldmanagement
Entwicklerressourcen
Übersicht
Versionierung
Änderungsprotokoll
Aktualisieren Sie Ihre API-Version
Ihre SDK-Version aktualisieren
Essentials
SDKs
API
Tests
Stripe-CLI
Beispiel-Projekte
Tools
Workbench
Entwickler-Dashboard
Stripe Shell
Stripe für Visual Studio Code
Funktionen
Arbeitsabläufe
Ereignisziele
Stripe-StatuswarnungenHochgeladene Dateien
KI-Lösungen
Agent-Toolkit
Model Context Protocol
Sicherheit und Datenschutz
Sicherheit
Datenschutz
Extend Stripe
Build Stripe apps
    Übersicht
    Jetzt starten
    Eine App erstellen
    Funktionsweise von Stripe-Apps
    Beispiel-Apps
    App erstellen
    Shop-Geheimnisse
    API-Authentifizierungsmethoden
    Autorisierungsabläufe
    Serverseitige Logik
    Ereignisse überwachen
    Umgang mit verschiedenen Modi
    Sandbox-Unterstützung aktivieren
    App-Einstellungsseite
    Erstellen Sie eine Nutzeroberfläche
    Onboarding
    Ihre App verbreiten
    Vertriebsmöglichkeiten
    App hochladen
    Versionen und Releases
    Ihre App testen
    Ihre App veröffentlichen
    Ihre App bewerben
    Deep-Links hinzufügen
    Installationslinks erstellen
    Rollen in Erweiterungen der Nutzeroberfläche zuweisen
    Aktionen nach der Installation
    App-Analytik
    Eingebettete Komponenten
    Stripe-Apps von Drittanbietern einbetten
    Umstellung auf Stripe Apps
    Migrieren oder Erweiterung erstellen
    Ein Plugin zu Stripe Apps oder Stripe Connect migrieren
    Verwendungszweck
    App-Manifest
    CLI
    Erweiterungs-SDK
    Berechtigungen
    Darstellungsfelder
    Entwurfsmuster
    Komponenten
      Accordion
      Badge
      Banner
      Balkendiagramm
      Textfeld
      Schaltfläche
      ButtonGroup
      Kontrollkästchen
      Chip
      ContextView
      DateField
      Trennzeichen
      FocusView
      FormFieldGroup
      Symbol
      Img
      Inline
      Liniendiagramm
      Link
      Liste
      Menü
      PropertyList
      Radio
      Auswählen
      SettingsView
      SignInView
      Sparkline
      Sanduhr
      Wechseln
      Tisch
      Registerkarten
      Aufgabenliste
      TextArea
      TextField
      Toast
      QuickInfo
Use apps from Stripe
Partner
Partner-Ecosystem
Partner-Zertifizierung
StartseiteEntwicklerressourcenBuild Stripe appsComponents

Bildkomponente für Stripe-Apps

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

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:

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

Bild-Eigenschaften

EigenschaftTyp

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:

Beispiel wird geladen ...
<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.

Beispiel wird geladen ...
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:

Beispiel wird geladen ...
<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:

Beispiel wird geladen ...
<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>

Siehe auch

  • Entwurfsmuster als Orientierung
  • App gestalten
  • Test der Nutzeroberfläche
War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc