> ## 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 ブロック

> Aftersell Cart の Image ブロック — 画像や、決済アイコンなどのホストされたプリセットをドロワー内に表示します。

> **Image** ブロックは、カートドロワー内に 1 枚の画像（トラストバッジ、プロモーション画像、決済アイコンの帯などのホストされたプリセット）を表示し、独自の画像をアップロードするか既製のプリセットを配置することで、カートに視覚的な安心感やプロモーションを追加します。

<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 ブロック" 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 フィールドを空欄のままにした場合はプリセット自身の alt テキストが使われます。

<div id="placement-and-limits">
  ## 配置と制限
</div>

* **領域:** どこでも（上部、ボディ、下部）。
* **最大数:** カート状態ごとに 3 つ。商品が入ったカートと空のカートで、それぞれ別枠です。
* **状態:** 商品が入ったカートと空のカートの両方。
* デフォルトでは追加されません。ロックされていないため、削除や非表示が可能です。

<div id="custom-template">
  ## カスタムテンプレート
</div>

Code タブから[カスタムテンプレート](/ja/aftersell/cart/custom-templates)をサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は次のとおりです。

| Prop        | 型               | 用途                                         |
| ----------- | --------------- | ------------------------------------------ |
| `imageUrl`  | `string`        | アップロードされたファイルまたは選択されたプリセット。未設定の場合は空。       |
| `altText`   | `string`        | 画像の alt テキスト。                              |
| `maxHeight` | `number`（オプション） | 最大の高さ（ピクセル単位）。これより高い画像はアスペクト比を保ったまま縮小されます。 |
| `fullWidth` | `boolean`       | 端から端まで: 画像は水平パディングなしでカートの全幅に広がります。         |

<Note>
  `altText` は空の場合があります。属性を省略するのではなく `alt=""` としてレンダリングし、画像が装飾として扱われるようにしてください。`maxHeight` と `fullWidth` は、あなた自身のスタイルで適用するための値です。テンプレートが自動的に適用してくれるわけではありません。
</Note>

<div id="design">
  ## デザイン
</div>

このブロックのスタイルは、設定パネルの **Design** セクションで設定します。これらはグローバルデザインの上に重なるブロックごとの上書きで、空欄の場合はグローバル設定にフォールバックします。

デザイン設定とは何か？詳しくはこちら: [デザイン設定](/ja/aftersell/cart/design-settings)。