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

# Bloco Image

> O bloco Image do Aftersell Cart — exiba uma imagem ou um preset hospedado, como ícones de pagamento, dentro do drawer.

> O bloco **Image** exibe uma única imagem dentro do cart drawer (um selo de confiança, um gráfico promocional ou um preset hospedado, como uma faixa de ícones de pagamento) para adicionar segurança visual ou promoção ao carrinho, seja enviando a sua própria imagem ou inserindo um preset pronto.

<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="Bloco Image renderizando uma imagem hospedada ou um asset de preset dentro do cart drawer" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

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

* Se nenhuma imagem e nenhum preset estiverem definidos, o bloco não renderiza **nada** no carrinho ativo. No editor, ele mostra um placeholder "Add an image" para que o bloco continue selecionável.

<div id="settings">
  ## Configurações
</div>

| Configuração   | O que controla                                                                                              | Padrão     |
| -------------- | ----------------------------------------------------------------------------------------------------------- | ---------- |
| **Image**      | A imagem a exibir (upload).                                                                                 | Nenhum     |
| **Alt text**   | Descrição acessível da imagem. Traduzível.                                                                  | Nenhum     |
| **Max height** | Limita a altura da imagem em pixels. A imagem encolhe para caber e nunca é cortada.                         | Nenhum     |
| **Full width** | Estica a imagem de ponta a ponta pelo carrinho.                                                             | Desativado |
| **Preset**     | Um conjunto de imagens hospedado que substitui o seu upload. Atualmente o único preset é **payment icons**. | Nenhum     |

Quando você seleciona um preset, ele toma o lugar de qualquer imagem enviada, e o alt text do próprio preset é usado se você deixar o campo Alt text em branco.

<div id="placement-and-limits">
  ## Posicionamento e limites
</div>

* **Região:** qualquer (top, body ou bottom).
* **Máximo:** 3 por estado do carrinho — o carrinho cheio e o carrinho vazio têm cada um a própria cota.
* **Estado:** tanto carrinho cheio quanto vazio.
* Não é adicionado por padrão. Não é fixo — você pode removê-lo ou ocultá-lo.

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

Suporta um [template personalizado](/pt/aftersell/cart/custom-templates) pela aba Code, que substitui a marcação nativa deste bloco pelo seu JSX. Estas são as props que ele recebe.

| Prop        | Tipo                | Para que serve                                                                            |
| ----------- | ------------------- | ----------------------------------------------------------------------------------------- |
| `imageUrl`  | `string`            | O arquivo enviado ou o preset selecionado. Vazio quando nenhum está definido.             |
| `altText`   | `string`            | Alt text da imagem.                                                                       |
| `maxHeight` | `number` (opcional) | Altura máxima em pixels. Imagens mais altas encolhem para caber, preservando a proporção. |
| `fullWidth` | `boolean`           | De ponta a ponta: a imagem ocupa toda a largura do carrinho, sem padding horizontal.      |

<Note>
  `altText` pode estar vazio. Renderize `alt=""` em vez de omitir o atributo, para que a imagem seja tratada como decorativa. `maxHeight` e `fullWidth` são valores para você aplicar nos seus próprios estilos; o template não os aplica por você.
</Note>

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

Estilize este bloco pela seção **Design** no painel de configurações. São substituições por bloco que se sobrepõem ao seu design global e voltam a ele quando ficam em branco.

O que são configurações de design? Saiba mais aqui: [Configurações de design](/pt/aftersell/cart/design-settings).