Image

کامپوننت تصویر که اگر منبع بارگذاری نشود، به یک تصویر جایگزین درون‌ساخت سوئیچ می‌کند.

کجا به کارش ببرید: وقتی تصویری می‌خواهید که در صورت شکست منبع، به‌آرامی به یک جانگهدار برگردد. <r-img> تصویر «خرابِ» درون‌ساخت یا fallback خودتان را جایگزین می‌کند.

شروع سریع

استفادهٔ پایه

<r-img src="https://picsum.photos/id/1015/240/160"></r-img>

مرجع API

خصیصه‌ها

خصیصه	نوع	پیش‌فرض	توضیح
src	string	''	نشانی تصویر. واکنشی است: تغییر آن پس از mount تصویر را دوباره بار می‌کند.
alt	string	''	متن جایگزین که به <img> درونی می‌رسد. خالی یعنی تزئینی.
fallback	string	data URI درون‌ساخت تصویر خراب	تصویری که وقتی src بار نشود نمایش می‌یابد.
sheet	string	''	CSS تزریق‌شده به shadow DOM کامپوننت.

هر چهار مورد src، alt، fallback و sheet پایش می‌شوند و واکنشی به‌روز می‌شوند: تغییر هرکدام روی عنصری که mount شده، بی‌درنگ اثر می‌گذارد.

منبع تصویر src

<r-img src="https://picsum.photos/id/1025/240/160"></r-img>

متن جایگزین alt

alt به <img> درونی می‌رسد. برای تصویرهای تزئینی همان مقدار پیش‌فرض خالی را نگه دارید تا صفحه‌خوان‌ها از آن بگذرند، و برای تصویرهای معنادار توضیح بنویسید.

<r-img src="https://picsum.photos/id/1035/240/160" alt="دریاچه‌ای کوهستانی در غروب"></r-img>

شکست در بارگذاری fallback

وقتی src بار نشود، کامپوننت fallback را جایگزین می‌کند. اگر fallback تعیین نشده باشد، از جانگهدار تصویر خرابِ درون‌ساخت استفاده می‌شود. در نمونهٔ زیر src نشانی نامعتبری است، پس تصویر جایگزین دیده می‌شود.

<r-img
  src="https://example.invalid/does-not-exist.png"
  fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...(جانگهدار تصویر خراب)..."
></r-img>

استایل بیرونی sheet

sheet کد CSS خام را به shadow DOM کامپوننت تزریق می‌کند. از آن برای استایل دادن به نگه‌دارندهٔ درونی .ran-image یا به <img> داخلی استفاده کنید.

<r-img
  src="https://picsum.photos/id/1043/240/160"
  sheet="img { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.25); }"
></r-img>

رویدادها

ندارد. r-img هیچ رویداد سفارشی‌ای ارسال نمی‌کند.

بهترین شیوه‌ها

• src را هر وقت خواستید عوض کنید: واکنشی است، پس به‌روزرسانی آن روی عنصری که mount شده تصویر را دوباره بار می‌کند؛ اگر نشانی تازه هم شکست بخورد، جایگزین همچنان کار می‌کند.
• به تصویرهای معنادار alt بدهید: محتوا را برای صفحه‌خوان توصیف کنید؛ alt را فقط برای تصویرهای کاملاً تزئینی خالی بگذارید.
• به جایگزین درون‌ساخت تکیه کنید: جانگهدار پیش‌فرض خودکار به کار می‌رود؛ تنها وقتی fallback خودتان را بدهید که جانگهداری متناسب با برند یا بافتار بخواهید.
• استایل را با sheet بدهید: چون تصویر داخل shadow DOM است، حاشیه، گردی گوشه و اندازه را با ویژگی sheet (یا متغیرهای CSS کامپوننت) تعیین کنید.