# Verwenden Sie Bilder in einer Vorlage

Wählen Sie ein Asset-Bild aus, zeigen Sie es in HTML an oder verwenden Sie es als Seiten-, Kopf- oder Fußzeilenhintergrund.

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](/docs/de/assets/manage/) 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.

<figure class="doc-sim data-assets-illustration" aria-label="Asset-Prop → Bild auswählen → Projektbild auswählen">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Props</strong></div><div class="ds-node"><strong>Logo</strong><span class="ds-type">Vermögenswert <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ds-pad"><span class="sim-control sim-focus">▧ Bild auswählen</span></div><div class="ds-asset-grid"><div class="ds-asset sim-focus"><div class="ds-thumb"><span>T</span></div><strong>logo.png</strong><small>PNG</small></div><div class="ds-asset"><div class="ds-thumb"><span>T</span></div><strong>cover.jpg</strong><small>JPG</small></div></div></div></div>
<figcaption>Asset-Prop → Bild auswählen → Projektbild auswählen</figcaption>
</figure>

## 2. Zeigen Sie das Bild in HTML an

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

```handlebars
<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:

```css
.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.

<figure class="doc-sim data-assets-illustration" aria-label="HTML → props.logo → Bild">
<div class="sim-stage"><div class="ds-code sim-focus"><code>&lt;img src="{{ props.logo }}"</code><code>     alt="Logo" class="logo" /&gt;</code></div><div class="ds-image-preview"><div class="ds-logo">Tembuilder</div><small>props.logo</small></div></div>
<figcaption>HTML → props.logo → Bild</figcaption>
</figure>

## 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](/docs/de/editor/header-footer/) für diese Bereiche.

<figure class="doc-sim data-assets-illustration" aria-label="Hintergrund → Bild → Größe und Position auswählen">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Seitenhintergrund</strong></div><div class="ds-setting"><span>Bild</span><span class="sim-control sim-focus">Bild auswählen</span></div><div class="ds-rows"><div><span>Größe</span><small>Abdeckung</small></div><div><span>Position</span><small>Mitte</small></div><div><span>Wiederholen</span><small>Keine Wiederholung</small></div></div></div><div class="ds-image-options"><span>enthalten</span><span>Abdeckung</span></div></div>
<figcaption>Hintergrund → Bild → Größe und Position auswählen</figcaption>
</figure>

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

```html
<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](/docs/de/plans/limits/)].

<figure class="doc-sim data-assets-illustration" aria-label="Verwenden Sie eine URL, die direkt auf eine öffentliche Bilddatei verweist">
<div class="sim-stage"><div class="ds-url-box sim-focus"><small>HTTPS-Bild-URL</small><code>https://example.com/images/banner.png</code></div><div class="ds-source-path"><span>URL</span><span>→</span><span>Bilddatei</span><span>→</span><span>PDF</span></div></div>
<figcaption>Verwenden Sie eine URL, die direkt auf eine öffentliche Bilddatei verweist</figcaption>
</figure>