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

> Блок Image в Aftersell Cart — отображайте изображение или размещённый пресет, например иконки способов оплаты, внутри drawer-корзины.

> Блок **Image** отображает одно изображение внутри drawer-корзины (значок доверия, рекламную графику или размещённый пресет, например полосу иконок способов оплаты), чтобы добавить корзине визуальной уверенности или продвижения — либо загрузив собственное изображение, либо вставив готовый пресет.

<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, отображающий размещённое изображение или пресет внутри drawer-корзины" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

<div id="behavior">
  ## Поведение
</div>

* Если не заданы ни изображение, ни пресет, блок **ничего не отображает** в живой корзине. В редакторе он показывает заглушку «Add an image», чтобы блок оставался доступным для выбора.

<div id="settings">
  ## Настройки
</div>

| Настройка      | Что она контролирует                                                                                                            | По умолчанию |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| **Image**      | Отображаемое изображение (загрузка).                                                                                            | Нет          |
| **Alt text**   | Доступное описание изображения. Переводится.                                                                                    | Нет          |
| **Max height** | Ограничивает высоту изображения в пикселях. Изображение уменьшается по размеру и никогда не обрезается.                         | Нет          |
| **Full width** | Растягивает изображение от края до края по всей ширине корзины.                                                                 | Выкл.        |
| **Preset**     | Размещённый набор изображений, который переопределяет вашу загрузку. В настоящее время единственный пресет — **payment icons**. | Нет          |

Когда вы выбираете пресет, он заменяет любое загруженное изображение, а собственный alt-текст пресета используется, если вы оставите поле Alt text пустым.

<div id="placement-and-limits">
  ## Размещение и ограничения
</div>

* **Регион:** любой (верх, тело или низ).
* **Максимум:** 3 на состояние корзины — заполненная и пустая корзина получают каждая свой лимит.
* **Состояние:** и заполненная, и пустая корзина.
* Не добавляется по умолчанию. Не заблокирован — вы можете удалить или скрыть его.

<div id="custom-template">
  ## Пользовательский шаблон
</div>

Поддерживает [пользовательский шаблон](/ru/aftersell/cart/custom-templates) на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает.

| Prop        | Тип                       | Для чего используется                                                                          |
| ----------- | ------------------------- | ---------------------------------------------------------------------------------------------- |
| `imageUrl`  | `string`                  | Загруженный файл или выбранный пресет. Пустой, если ничего не задано.                          |
| `altText`   | `string`                  | Alt-текст изображения.                                                                         |
| `maxHeight` | `number` (необязательный) | Максимальная высота в пикселях. Более высокие изображения уменьшаются с сохранением пропорций. |
| `fullWidth` | `boolean`                 | От края до края: изображение занимает всю ширину корзины без горизонтальных отступов.          |

<Note>
  `altText` может быть пустым. Отображайте `alt=""`, а не опускайте атрибут, чтобы изображение считалось декоративным. `maxHeight` и `fullWidth` — это значения, которые вы применяете в собственных стилях; шаблон не применяет их за вас.
</Note>

<div id="design">
  ## Дизайн
</div>

Стилизуйте этот блок через его раздел **Design** в панели настроек. Это переопределения на уровне блока, которые накладываются поверх вашего глобального дизайна и возвращаются к нему, если оставлены пустыми.

Что такое настройки дизайна? Узнайте больше здесь: [Настройки дизайна](/ru/aftersell/cart/design-settings).