Avatar (صورة رمزية)

عرض الصورة الرمزية. ثلاثة أشكال — صورة وأيقونة ونص — تتدرّج حسب الأولوية: عند فشل src يُلتجأ تباعًا إلى icon ثم إلى الحرف الأول من text.

صورة رمزية

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap">
      <LhAvatar :src="src" alt="تفصيل من لوحة رحلة في الجبال والوديان" />
      <LhAvatar :src="src" shape="square" />
      <LhAvatar text="فان كوان" />
      <LhAvatar icon="lh-icon-user" />
      <LhAvatar text="سونغ" shape="square" size="large" />
      <LhAvatar text="غوو" size="small" />
      <LhAvatar text="مخصص" :size="64" fit="cover" />
    </div>
    <p class="demo-note">عند فشل تحميل الصورة يتم التدرج إلى alt / الأيقونة / النص</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap">
      <LhAvatar src="https://placeholder.lhgb.top/broken.png" alt="فشل التحميل" />
      <LhAvatar src="https://placeholder.lhgb.top/broken.png" icon="lh-icon-user" alt="أيقونة احتياطية" />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    src: 'data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2764%27%20height=%2764%27%3E%3Crect%20width=%2764%27%20height=%2764%27%20fill=%27%23e8e2d5%27/%3E%3Cpath%20d=%27M0%2046%20Q16%2032%2032%2046%20T64%2046%20V64%20H0%20Z%27%20fill=%27%23c9c2b2%27/%3E%3Ctext%20x=%2750%%27%20y=%2726%27%20font-size=%2726%27%20fill=%27%232b4c7c%27%20text-anchor=%27middle%27%20font-family=%27serif%27%3E%E5%B1%B1%3C/text%3E%3C/svg%3E',
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
src	عنوان الصورة؛ عند فراغه يُلتجأ تباعًا إلى الأيقونة ثم النص	string	—
alt	النص البديل عند فشل تحميل الصورة، ويُستخدم أيضا كـ alt	string	—
icon	اسم فئة الأيقونة (تُعرض عندما يكون src فارغًا أو يفشل تحميله)	string	—
text	محتوى الصورة النصية (عند غياب src وicon يُعرض الحرف الأول)	string	—
shape	شكل الصورة الرمزية	'circle' \| 'square'	'circle'
size	حجم الصورة الرمزية	'small' \| 'default' \| 'large' \| number	'default'
fit	نمط ملاءمة الصورة	'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'	'cover'
sx	خصائص التخطيط السريع sx	—	—