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

# 图片区块

> Aftersell Cart 的图片区块——在抽屉内展示图片或托管预设（例如支付图标）。

> **Image** 区块在购物车抽屉内显示单张图片（信任徽章、促销图形，或支付图标条之类的托管预设），为购物车增加视觉信任感或促销效果，你可以上传自己的图片，也可以直接使用现成的预设。

<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="在购物车抽屉内渲染托管图片或预设素材的图片区块" 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**     | 覆盖你上传图片的托管图片集。目前唯一的预设是**支付图标**。 | 无   |

选择预设后，它会取代任何已上传的图片；如果你将 Alt text 字段留空，将使用预设自带的替代文本。

<div id="placement-and-limits">
  ## 位置和限制
</div>

* \*\*区域：\*\*任意（顶部、主体或底部）。
* \*\*数量上限：\*\*每个购物车状态 3 个——已装满购物车和空购物车各有自己的额度。
* \*\*状态：\*\*已装满和空购物车均可。
* 默认不添加。未锁定——你可以删除或隐藏它。

<div id="custom-template">
  ## 自定义模板
</div>

支持从其 Code 标签页使用[自定义模板](/zh/aftersell/cart/custom-templates)，用你的 JSX 替换此区块的内置标记。以下是它接收的 props。

| Prop        | 类型           | 用途                          |
| ----------- | ------------ | --------------------------- |
| `imageUrl`  | `string`     | 上传的文件或选中的预设。未设置时为空。         |
| `altText`   | `string`     | 图片的替代文本。                    |
| `maxHeight` | `number`（可选） | 最大高度（像素）。更高的图片会缩小以适应，保持宽高比。 |
| `fullWidth` | `boolean`    | 通边显示：图片横跨购物车全宽，没有水平内边距。     |

<Note>
  `altText` 可能为空。请渲染 `alt=""` 而不是省略该属性，这样图片会被视为装饰性图片。`maxHeight` 和 `fullWidth` 是供你在自己的样式中应用的值；模板不会替你应用它们。
</Note>

<div id="design">
  ## 设计
</div>

使用设置面板中的 **Design** 部分为此区块设置样式。这些是按区块的覆盖，叠加在你的全局设计之上，留空时回退到全局设计。

什么是设计设置？在这里了解更多：[设计设置](/zh/aftersell/cart/design-settings)。