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

# Bloque Image

> El bloque Image del Aftersell Cart: muestra una imagen o un preset alojado como iconos de pago dentro del drawer.

> El bloque **Image** muestra una sola imagen dentro del drawer del carrito (una insignia de confianza, un gráfico promocional o un preset alojado como una franja de iconos de pago) para agregar tranquilidad visual o promoción al carrito, ya sea subiendo tu propia imagen o colocando un preset ya hecho.

<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="Bloque Image renderizando una imagen alojada o un recurso preset dentro del drawer del carrito" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

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

* Si no se establece ninguna imagen ni preset, el bloque no renderiza **nada** en el carrito en vivo. En el editor muestra un placeholder de "Add an image" para que el bloque siga siendo seleccionable.

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

| Configuración  | Qué controla                                                                                          | Predeterminado |
| -------------- | ----------------------------------------------------------------------------------------------------- | -------------- |
| **Image**      | La imagen a mostrar (carga).                                                                          | Ninguno        |
| **Alt text**   | Descripción accesible de la imagen. Traducible.                                                       | Ninguno        |
| **Max height** | Limita la altura de la imagen en píxeles. La imagen se reduce para ajustarse y nunca se recorta.      | Ninguno        |
| **Full width** | Estira la imagen de borde a borde a lo ancho del carrito.                                             | Desactivado    |
| **Preset**     | Un conjunto de imágenes alojado que anula tu carga. Actualmente el único preset es **payment icons**. | Ninguno        |

Cuando seleccionas un preset, este toma el lugar de cualquier imagen subida, y se usa el texto alternativo propio del preset si dejas el campo Alt text en blanco.

<div id="placement-and-limits">
  ## Ubicación y límites
</div>

* **Región:** cualquiera (parte superior, cuerpo o parte inferior).
* **Máximo:** 3 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo.
* **Estado:** carrito con artículos y vacío.
* No se agrega de forma predeterminada. No está bloqueado — puedes eliminarlo u ocultarlo.

<div id="custom-template">
  ## Plantilla personalizada
</div>

Admite una [plantilla personalizada](/es/aftersell/cart/custom-templates) desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.

| Prop        | Tipo                | Para qué sirve                                                                                                  |
| ----------- | ------------------- | --------------------------------------------------------------------------------------------------------------- |
| `imageUrl`  | `string`            | El archivo subido o el preset seleccionado. Vacío cuando no se ha establecido ninguno.                          |
| `altText`   | `string`            | Texto alternativo de la imagen.                                                                                 |
| `maxHeight` | `number` (opcional) | Altura máxima en píxeles. Las imágenes más altas se reducen para ajustarse, preservando la relación de aspecto. |
| `fullWidth` | `boolean`           | De borde a borde: la imagen abarca todo el ancho del carrito, sin padding horizontal.                           |

<Note>
  `altText` puede estar vacío. Renderiza `alt=""` en lugar de omitir el atributo, para que la imagen se trate como decorativa. `maxHeight` y `fullWidth` son valores que tú debes aplicar en tus propios estilos; la plantilla no los aplica por ti.
</Note>

<div id="design">
  ## Diseño
</div>

Dale estilo a este bloque con su sección **Design** en el panel de configuración. Son anulaciones por bloque que se aplican encima de tu diseño global y recurren a él cuando están en blanco.

¿Qué son las configuraciones de diseño? Aprende más aquí: [Configuraciones de diseño](/es/aftersell/cart/design-settings).