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

# Afbeeldingsblok

> Het Aftersell Cart Image-blok — toon een afbeelding of een gehoste preset zoals betaaliconen in de drawer.

> Het **Image**-blok toont één afbeelding in de cart drawer (een trustbadge, een promotiegraphic of een gehoste preset zoals een strook betaaliconen) om visuele geruststelling of promotie aan de winkelwagen toe te voegen, ofwel door je eigen afbeelding te uploaden, ofwel door een kant-en-klare preset te kiezen.

<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-blok dat een gehoste afbeelding of preset-asset in de cart drawer rendert" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

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

* Als er geen afbeelding en geen preset zijn ingesteld, rendert het blok **niets** op de live winkelwagen. In de editor toont het een "Add an image"-placeholder zodat het blok selecteerbaar blijft.

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

| Instelling     | Wat het regelt                                                                                                | Standaard |
| -------------- | ------------------------------------------------------------------------------------------------------------- | --------- |
| **Image**      | De afbeelding die wordt getoond (upload).                                                                     | Geen      |
| **Alt text**   | Toegankelijke beschrijving van de afbeelding. Vertaalbaar.                                                    | Geen      |
| **Max height** | Begrenst de hoogte van de afbeelding in pixels. De afbeelding krimpt om te passen en wordt nooit bijgesneden. | Geen      |
| **Full width** | Rekt de afbeelding van rand tot rand over de winkelwagen uit.                                                 | Uit       |
| **Preset**     | Een gehoste afbeeldingsset die je upload overschrijft. Momenteel is de enige preset **payment icons**.        | Geen      |

Wanneer je een preset selecteert, neemt die de plaats in van een geüploade afbeelding, en wordt de eigen alt-tekst van de preset gebruikt als je het veld Alt text leeg laat.

<div id="placement-and-limits">
  ## Plaatsing en limieten
</div>

* **Regio:** overal (bovenkant, body of onderkant).
* **Maximum:** 3 per winkelwagenstaat — de gevulde winkelwagen en de lege winkelwagen krijgen elk hun eigen limiet.
* **Staat:** zowel gevulde als lege winkelwagen.
* Niet standaard toegevoegd. Niet vergrendeld — je kunt het verwijderen of verbergen.

<div id="custom-template">
  ## Aangepaste template
</div>

Ondersteunt een [aangepaste template](/nl/aftersell/cart/custom-templates) via het tabblad Code, die de ingebouwde markup van dit blok vervangt door jouw JSX. Dit zijn de props die het ontvangt.

| Prop        | Type                 | Waarvoor het dient                                                                                            |
| ----------- | -------------------- | ------------------------------------------------------------------------------------------------------------- |
| `imageUrl`  | `string`             | Het geüploade bestand of de geselecteerde preset. Leeg wanneer er geen is ingesteld.                          |
| `altText`   | `string`             | Alt-tekst voor de afbeelding.                                                                                 |
| `maxHeight` | `number` (optioneel) | Maximale hoogte in pixels. Hogere afbeeldingen krimpen om te passen, met behoud van beeldverhouding.          |
| `fullWidth` | `boolean`            | Van rand tot rand: de afbeelding beslaat de volledige breedte van de winkelwagen, zonder horizontale padding. |

<Note>
  `altText` kan leeg zijn. Render `alt=""` in plaats van het attribuut weg te laten, zodat de afbeelding als decoratief wordt behandeld. `maxHeight` en `fullWidth` zijn waarden die je zelf in je eigen styles moet toepassen; de template past ze niet voor je toe.
</Note>

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

Style dit blok via de sectie **Design** in het instellingenpaneel. Dit zijn overrides per blok die bovenop je globale design komen en erop terugvallen wanneer ze leeg zijn.

Wat zijn design-instellingen? Lees er hier meer over: [Design-instellingen](/nl/aftersell/cart/design-settings).