Image

<r-img>API توکن‌های سبک کد منبع

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

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

شروع سریع

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

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

مرجع API

خصیصه‌ها

خصیصه	نوع	پیش‌فرض	توضیح
`src`	`string`	`''`	نشانی تصویر. واکنشی است: تغییر آن پس از mount تصویر را دوباره بار می‌کند.
`alt`	`string`	`''`	متن جایگزین که به `<img>` درونی می‌رسد. خالی یعنی تزئینی.
`fallback`	`string`	`''`	تصویری که وقتی `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>

وقتی src بار نشود، کامپوننت fallback را جایگزین می‌کند. اگر fallback تعیین نشده باشد، کادر اندازه‌اش را نگه می‌دارد و روی سطحی کم‌رنگ (--ran-image-placeholder-background) نماد تصویری با رنگ --ran-image-fallback-color نشان می‌دهد. در نمونهٔ زیر 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> داخلی استفاده کنید. <img> داخلی از بیرون هم با ::part(image) در دسترس است که معمولاً ساده‌تر است.

<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 کامپوننت) تعیین کنید.