Verwenden Sie Bilder in einer Vorlage

Ein Bild kann ein fester Bestandteil des Designs sein, beispielsweise ein Logo oder ein Seitenhintergrund. Wählen Sie ein Bild aus, das im Assets des Projekts gespeichert ist, oder verwenden Sie eine HTTPS-URL für ein an anderer Stelle gehostetes Bild.

Assets behält wiederverwendbare Bilder im Projekt und ermöglicht die direkte Auswahl im Editor.

1. Wählen Sie ein Bild aus Assets

Laden Sie ein Bild auf Assets im Projekt hoch. Wählen Sie im Editor den Teil aus, der das Bild benötigt, öffnen Sie Props, fügen Sie eine Prop hinzu und wählen Sie Asset. Wählen Sie Bild auswählen, öffnen Sie den Ordner und wählen Sie die Datei aus.

Rufen Sie beispielsweise die Prop logo auf. Die App speichert einen Verweis auf die ausgewählte Projektdatei, sodass Sie keine Download-URL in die Vorlage einfügen müssen.

Wenn Sie ein anderes Bild für die Prop auswählen, werden die HTML-Standorte mit derselben Prop aktualisiert.

2. Zeigen Sie das Bild in HTML an

Verwenden Sie im Abschnitt, der die logo-Prop enthält:

<img src="{{ props.logo }}" alt="Logo" class="logo" />

Für eine Logo-Prop Global verwenden Sie {{ global.props.logo }}. Legen Sie die Abmessungen im CSS des Abschnitts fest:

.logo {
  width: 120px;
  height: 48px;
  object-fit: contain;
}

contain passt das komplette Bild in die Box; cover füllt das Feld und schneidet möglicherweise überschüssigen Inhalt ab. Wählen Sie das gewünschte Verhalten, anstatt das Bild in beide Dimensionen zu strecken.

3. Verwenden Sie ein Bild als Hintergrund

Für einen gemeinsamen Hintergrund öffnen Sie Global → Config → Seitenhintergrund und wählen Sie ein Bild aus. Wählen Sie eine einzelne Seite aus, öffnen Sie Config → Hintergrund → Seitenhintergrund und aktivieren Sie ihren eigenen Hintergrund.

Größe, Position und Wiederholen steuern, wie das Bild den Hintergrund ausfüllt. Beispielsweise füllt „Abdecken“ den Bereich aus, „Mitte“ platziert ihn in der Mitte und „Keine Wiederholung“ verhindert das Kacheln.

Kopf- und Fußzeilen haben in Config ihre eigenen Hintergrundeinstellungen. Siehe Kopf- und Fußzeilen für diese Bereiche.

4. Verwenden Sie eine externe Bild-URL

Sie können eine HTTPS-URL direkt in src einfügen, wenn der Arbeitsbereich externe Bilder zulässt. Es muss eine öffentliche Bilddatei zurückgeben und keine Webseite mit einem Bild oder einer URL, die eine Anmeldung erfordert.

<img src="https://example.com/images/banner.png" alt="" />

Externe Bild-URLs akzeptieren PNG, JPEG, WebP, GIF und AVIF. Remote SVG wird nicht unterstützt; Laden Sie SVG über Assets hoch und wählen Sie es mit einer Asset-Prop aus. URLs müssen HTTPS auf Port 443 verwenden, keinen eingebetteten Benutzernamen/Passwort haben und in öffentliche Adressen aufgelöst werden; Weiterleitungen werden ebenfalls überprüft.

Limits pro Rendering: 5 MiB pro Bild, 30 MiB insgesamt, 100 Bildanfragen und 10 Sekunden pro Abruf einschließlich Weiterleitungen. Eine öffentliche URL kann dennoch fehlschlagen, wenn ihr Format, ihre Größe oder ihre Antwort gegen diese Grenzwerte verstößt. Bei Plänen, die externe Bilder zulassen, schlagen Abruffehler beim Rendern fehl, anstatt das Bild stillschweigend wegzulassen.

Wenn ein Bild in einem angemeldeten Browser funktioniert, aber in einem PDF fehlt, prüfen Sie, ob seine URL von einem Cookie oder einer Sitzung abhängt. Der Renderer muss es unabhängig von Ihrem Browser abrufen.

Verwenden Sie für Bilder, die bereits in Assets vorhanden sind, die Asset-Auswahl, anstatt eine Vorschau-URL zu kopieren. Wenn der Ressourcenzugriff nicht verfügbar ist, zeigt die App die entsprechende Meldung an; Einzelheiten zum Zugriff auf den Arbeitsbereich finden Sie unter Planlimits].