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

# Bloc Image

> Le bloc Image du panier Aftersell — affichez une image ou un préréglage hébergé, comme des icônes de paiement, dans le tiroir.

> Le bloc **Image** affiche une seule image dans le tiroir du panier (un badge de confiance, un visuel promotionnel ou un préréglage hébergé comme une bande d'icônes de paiement) pour ajouter une réassurance visuelle ou une promotion au panier, soit en téléversant votre propre image, soit en insérant un préréglage prêt à l'emploi.

<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="Bloc Image affichant une image hébergée ou un élément de préréglage dans le tiroir du panier" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

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

* Si aucune image ni aucun préréglage n'est défini, le bloc n'affiche **rien** sur le panier en ligne. Dans l'éditeur, il affiche un espace réservé « Add an image » pour que le bloc reste sélectionnable.

<div id="settings">
  ## Paramètres
</div>

| Paramètre      | Ce qu'il contrôle                                                                                                      | Défaut    |
| -------------- | ---------------------------------------------------------------------------------------------------------------------- | --------- |
| **Image**      | L'image à afficher (téléversement).                                                                                    | Aucun     |
| **Alt text**   | Description accessible de l'image. Traduisible.                                                                        | Aucun     |
| **Max height** | Limite la hauteur de l'image en pixels. L'image se réduit pour s'adapter et n'est jamais rognée.                       | Aucun     |
| **Full width** | Étire l'image bord à bord sur toute la largeur du panier.                                                              | Désactivé |
| **Preset**     | Un ensemble d'images hébergé qui remplace votre téléversement. Actuellement, le seul préréglage est **payment icons**. | Aucun     |

Lorsque vous sélectionnez un préréglage, il prend la place de toute image téléversée, et le texte alternatif propre au préréglage est utilisé si vous laissez le champ Alt text vide.

<div id="placement-and-limits">
  ## Placement et limites
</div>

* **Région :** n'importe laquelle (haut, corps ou bas).
* **Maximum :** 3 par état de panier. Le panier rempli et le panier vide ont chacun leur propre quota.
* **État :** panier rempli et panier vide.
* Non ajouté par défaut. Non verrouillé — vous pouvez le supprimer ou le masquer.

<div id="custom-template">
  ## Modèle personnalisé
</div>

Prend en charge un [modèle personnalisé](/fr/aftersell/cart/custom-templates) depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu'il reçoit.

| Prop        | Type                  | À quoi elle sert                                                                                                   |
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `imageUrl`  | `string`              | Le fichier téléversé ou le préréglage sélectionné. Vide lorsqu'aucun n'est défini.                                 |
| `altText`   | `string`              | Texte alternatif de l'image.                                                                                       |
| `maxHeight` | `number` (facultatif) | Hauteur maximale en pixels. Les images plus hautes se réduisent pour s'adapter, en conservant le rapport d'aspect. |
| `fullWidth` | `boolean`             | Bord à bord : l'image occupe toute la largeur du panier, sans padding horizontal.                                  |

<Note>
  `altText` peut être vide. Affichez `alt=""` plutôt que d'omettre l'attribut, afin que l'image soit traitée comme décorative. `maxHeight` et `fullWidth` sont des valeurs à appliquer dans vos propres styles ; le modèle ne les applique pas pour vous.
</Note>

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

Stylisez ce bloc avec sa section **Design** dans le panneau de paramètres. Il s'agit de surcharges par bloc qui se superposent à votre design global et y reviennent lorsqu'elles sont vides.

Que sont les paramètres de design ? Apprenez-en plus ici : [Paramètres de design](/fr/aftersell/cart/design-settings).