تصویر امن (SafeImage)

معرفی

کامپوننت SafeImage یک wrapper برای تگ <img> است که در صورت خطا در بارگذاری تصویر، یک UI جایگزین نمایش می‌دهد. همچنین از loading="lazy" برای بهینه‌سازی عملکرد استفاده می‌کند.

چه زمانی استفاده نکنیم:

• برای تصاویر static که هرگز خراب نمی‌شوند — از تگ <img> یا next/image استفاده کنید
• برای آواتار کاربران — از Avatar با AvatarFallback استفاده کنید

بارگذاری موفق

حالت خطا

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

زمین بازی

بازنشانی

تنظیمات

محتوا

آدرس تصویر

alt

کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

استفاده

import { SafeImage } from '@parto-system-design/ui'

<SafeImage src="/path/to/image.jpg" alt="توضیح تصویر" className="size-20 rounded-lg" />

مثال‌ها

با fallback سفارشی

<SafeImage src="/broken-url.jpg" alt="پروفایل" fallback={<Avatar>کاربر</Avatar>} />

در حالت گرید

<div className="grid grid-cols-3 gap-4">
  <SafeImage src="/img1.jpg" alt="تصویر ۱" className="aspect-square rounded-lg object-cover" />
  <SafeImage src="/img2.jpg" alt="تصویر ۲" className="aspect-square rounded-lg object-cover" />
  <SafeImage src="" alt="تصویر خراب" className="aspect-square rounded-lg" />
</div>

بدون src

اگر src خالی یا undefined باشد، مستقیماً fallback نمایش داده می‌شود:

<SafeImage src={undefined} alt="بدون تصویر" className="size-16 rounded-full" />

Props

دسترسی‌پذیری

• در حالت fallback، role="img" و aria-label تنظیم می‌شود
• از loading="lazy" برای بارگذاری تنبل استفاده می‌کند

راهنمای استفاده

کامپوننت‌های مرتبط

• Avatar — اگر نیاز به نمایش تصویر پروفایل کاربر دارید با fallback حروف اول نام