> ## 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** صورة واحدة داخل درج السلة (شارة ثقة أو رسمًا ترويجيًا أو تجهيزًا مُستضافًا مثل شريط من أيقونات الدفع) لإضافة طمأنة بصرية أو ترويج إلى السلة، إما برفع صورتك الخاصة أو بإدراج تجهيز جاهز.

<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**     | مجموعة صور مُستضافة تتجاوز الصورة المرفوعة. حاليًا التجهيز الوحيد هو **payment icons**. | لا شيء    |

عند اختيار تجهيز مسبق، يحل محل أي صورة مرفوعة، ويُستخدم النص البديل الخاص بالتجهيز إذا تركت حقل Alt text فارغًا.

<div id="placement-and-limits">
  ## الموضع والحدود
</div>

* **المنطقة:** أي منطقة (الأعلى أو الجسم أو الأسفل).
* **الحد الأقصى:** 3 لكل حالة سلة — للسلة الممتلئة والسلة الفارغة حصة مستقلة لكل منهما.
* **الحالة:** السلة الممتلئة والفارغة معًا.
* لا يُضاف افتراضيًا. غير مقفل — يمكنك إزالته أو إخفاؤه.

<div id="custom-template">
  ## القالب المخصص
</div>

يدعم [قالبًا مخصصًا](/ar/aftersell/cart/custom-templates) من تبويب Code الخاص به، والذي يستبدل الترميز المدمج لهذا البلوك بكود JSX الخاص بك. هذه هي الخصائص (props) التي يستقبلها.

| الخاصية     | النوع              | الغرض منها                                                                               |
| ----------- | ------------------ | ---------------------------------------------------------------------------------------- |
| `imageUrl`  | `string`           | الملف المرفوع أو التجهيز المحدد. تكون فارغة عندما لا يُضبط أي منهما.                     |
| `altText`   | `string`           | النص البديل للصورة.                                                                      |
| `maxHeight` | `number` (اختياري) | الحد الأقصى للارتفاع بالبكسل. تتقلص الصور الأطول لتلائم الحد مع الحفاظ على نسبة الأبعاد. |
| `fullWidth` | `boolean`          | من حافة إلى حافة: تمتد الصورة على كامل عرض السلة، بدون حشو أفقي.                         |

<Note>
  قد تكون `altText` فارغة. اعرض `alt=""` بدلًا من حذف السمة، حتى تُعامَل الصورة كصورة زخرفية. `maxHeight` و`fullWidth` هما قيمتان عليك تطبيقهما في أنماطك الخاصة؛ فالقالب لا يطبقهما نيابةً عنك.
</Note>

<div id="design">
  ## التصميم
</div>

نسّق هذا البلوك من قسم **Design** الخاص به في لوحة الإعدادات. هذه تجاوزات على مستوى البلوك تُطبَّق فوق تصميمك العام وتعود إليه عند تركها فارغة.

ما هي إعدادات التصميم؟ اعرف المزيد هنا: [إعدادات التصميم](/ar/aftersell/cart/design-settings).