> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image-Block

> Der Image-Block des Aftersell Cart — zeige ein Bild oder ein gehostetes Preset wie Zahlungssymbole im Drawer an.

> Der **Image**-Block zeigt ein einzelnes Bild im Cart-Drawer an (ein Vertrauenssiegel, eine Werbegrafik oder ein gehostetes Preset wie eine Reihe von Zahlungssymbolen), um dem Warenkorb visuelle Bestätigung oder Werbung hinzuzufügen — entweder durch das Hochladen eines eigenen Bildes oder durch das Einfügen eines fertigen Presets.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-image-block-hosted-preset-asset.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=373a75d9fe7c6ed7d7a39950b57662bb" alt="Image-Block, der ein gehostetes Bild oder Preset-Asset im Cart-Drawer rendert" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

<div id="behavior">
  ## Verhalten
</div>

* Wenn weder ein Bild noch ein Preset gesetzt ist, rendert der Block im Live-Warenkorb **nichts**. Im Editor zeigt er einen „Add an image“-Platzhalter, damit der Block auswählbar bleibt.

<div id="settings">
  ## Einstellungen
</div>

| Einstellung    | Was sie steuert                                                                                           | Standard |
| -------------- | --------------------------------------------------------------------------------------------------------- | -------- |
| **Image**      | Das anzuzeigende Bild (Upload).                                                                           | Keins    |
| **Alt text**   | Barrierefreie Beschreibung des Bildes. Übersetzbar.                                                       | Keiner   |
| **Max height** | Begrenzt die Bildhöhe in Pixeln. Das Bild schrumpft, um zu passen, und wird nie beschnitten.              | Keiner   |
| **Full width** | Streckt das Bild von Rand zu Rand über den Warenkorb.                                                     | Aus      |
| **Preset**     | Ein gehostetes Bildset, das deinen Upload überschreibt. Aktuell ist das einzige Preset **payment icons**. | Keins    |

Wenn du ein Preset auswählst, tritt es an die Stelle eines hochgeladenen Bildes, und der eigene Alt-Text des Presets wird verwendet, wenn du das Alt-text-Feld leer lässt.

<div id="placement-and-limits">
  ## Platzierung und Limits
</div>

* **Region:** beliebig (oben, Body oder unten).
* **Maximum:** 3 pro Warenkorb-Zustand — der gefüllte und der leere Warenkorb erhalten jeweils ihr eigenes Kontingent.
* **Zustand:** sowohl gefüllter als auch leerer Warenkorb.
* Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.

<div id="custom-template">
  ## Benutzerdefiniertes Template
</div>

Unterstützt ein [benutzerdefiniertes Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Das sind die Props, die er erhält.

| Prop        | Typ                 | Wofür sie ist                                                                                          |
| ----------- | ------------------- | ------------------------------------------------------------------------------------------------------ |
| `imageUrl`  | `string`            | Die hochgeladene Datei oder das ausgewählte Preset. Leer, wenn keins gesetzt ist.                      |
| `altText`   | `string`            | Alt-Text für das Bild.                                                                                 |
| `maxHeight` | `number` (optional) | Maximale Höhe in Pixeln. Höhere Bilder schrumpfen passend, unter Beibehaltung des Seitenverhältnisses. |
| `fullWidth` | `boolean`           | Von Rand zu Rand: Das Bild erstreckt sich über die volle Warenkorb-Breite, ohne horizontales Padding.  |

<Note>
  `altText` kann leer sein. Rendere `alt=""`, statt das Attribut wegzulassen, damit das Bild als dekorativ behandelt wird. `maxHeight` und `fullWidth` sind Werte, die du in deinen eigenen Styles anwenden musst; das Template wendet sie nicht für dich an.
</Note>

<div id="design">
  ## Design
</div>

Style diesen Block über seinen **Design**-Abschnitt im Einstellungs-Panel. Das sind blockspezifische Overrides, die über deinem globalen Design liegen und darauf zurückfallen, wenn sie leer sind.

Was sind Design-Einstellungen? Erfahre mehr hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).