Image

کامپوننت x-image برای نمایش تصاویر با امکانات پیشرفته مانند نمایش پاپ‌آپ (fancybox)، آیکن روی تصویر، fallback خودکار، تعیین اندازه، گردی گوشه، نسبت تصویر و ... در صفحات Blade استفاده می‌شود. این کامپوننت مناسب نمایش تصاویر کاربر، فایل‌های آپلود شده، تصاویر شاخص و هر نوع تصویر با نیاز به کنترل بیشتر در رابط کاربری است.

---

ویژگی‌ها

• پشتیبانی از انواع ورودی برای src (آدرس، مدل فایل، عدد)
• نمایش تصویر با قابلیت تعیین alt و title
• نمایش تصویر به صورت پاپ‌آپ (fancybox) با آیکن اختصاصی
• نمایش آیکن روی تصویر (قابل تنظیم)
• تعیین کلاس سفارشی برای ظرف و خود تصویر
• تعیین گردی گوشه (radius) به صورت عددی یا full
• تعیین width و height به صورت عددی یا رشته‌ای (مثلاً 200 یا "50%")
• پشتیبانی از aspect-ratio (نسبت تصویر)
• تعیین object-fit (cover یا contain)
• پشتیبانی از fallbackSrc برای بارگذاری جایگزین در صورت خطا
• نمایش placeholder لودینگ و آیکن خطا در صورت عدم بارگذاری تصویر
• بارگذاری lazy و بهینه
• کاملاً واکنش‌گرا و قابل استفاده در هر جای قالب Blade

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
src	string|int|object	-	آدرس تصویر، مدل فایل یا آیدی فایل
alt	string	null	متن جایگزین تصویر (alt)
title	string	null	عنوان تصویر (title)
showPopup	bool	false	نمایش تصویر به صورت پاپ‌آپ (fancybox)
showIcon	bool	false	نمایش آیکن روی تصویر (در حالت پاپ‌آپ)
icon	string	fa-light fa-file-magnifying-glass	کلاس آیکن FontAwesome برای آیکن روی تصویر
iconClass	string	null	کلاس CSS اضافی برای آیکن
containerClass	string	null	کلاس CSS اضافی برای ظرف اصلی
class	string	null	کلاس CSS اضافی برای تگ <img>
radius	int|string	null	گردی گوشه (عدد پیکسل یا 'full' برای گرد کامل)
width	int|string	null	عرض تصویر (عدد پیکسل یا رشته مثل '50%')
height	int|string	null	ارتفاع تصویر (عدد پیکسل یا رشته مثل '200px')
aspectRatio	int|string	null	نسبت تصویر (مثلاً 1.5 یا '16/9')
fit	string	'cover'	نوع object-fit تصویر (cover یا contain)
fallbackSrc	string	null	آدرس تصویر جایگزین در صورت خطا

---

نکات مهم

• اگر مقدار src عدد یا مدل فایل باشد، آدرس فایل به صورت خودکار استخراج می‌شود.
• اگر همزمان showPopup و showIcon مقداردهی شوند، آیکن فقط در حالت پاپ‌آپ نمایش داده می‌شود.
• مقدار radius می‌تواند عدد (پیکسل) یا 'full' باشد.
• اگر تصویر بارگذاری نشود و fallbackSrc مقداردهی شده باشد، تصویر جایگزین نمایش داده می‌شود.
• برای شخصی‌سازی بیشتر می‌توانید از کلاس‌های سفارشی و اسلات‌ها استفاده کنید.

---

مثال‌ها

نمونه پایه

<x-image
    src="https://marketplace.canva.com/zd64ZbHmEDc.jpg"
    alt="تصویر"
    title="تصویر"
    :showPopup="true"
    width="300"
    height="170"
/>

<x-image
    :src="\Dornica\Foundation\FileManager\Models\File::find(4)"
    alt="تصویر"
    title="تصویر"
    :showIcon="true"
    :showPopup="true"
    width="300"
    height="105"
/>

<x-image
    :src="4"
    alt="تصویر"
    title="تصویر"
    :showIcon="true"
    :showPopup="true"
    width="300"
    height="105"
/>