تصویر امن (SafeImage)

معرفی

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

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

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

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

حالت خطا

استفاده

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 حروف اول نام