صورة Image

حاوية صور قابلة للمعاينة. يمرّر fit قيمة object-fit الأصلية، ويفعّل preview المعاينة عند النقر، ويدعم previewSrcList تصفّح عدة صور.

صورة

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; align-items: flex-start">
      <div class="demo-col" style="gap: 8px">
        <LhImage :src="src" alt="لوحة رحلة بين الجبال والجدول" fit="cover" preview />
        <span class="demo-note">cover + قابلة للمعاينة</span>
      </div>
      <div class="demo-col" style="gap: 8px">
        <LhImage :src="src" alt="وضع contain" fit="contain" />
        <span class="demo-note">contain</span>
      </div>
      <div class="demo-col" style="gap: 8px">
        <LhImage :src="src" alt="تحميل كسول" fit="fill" lazy />
        <span class="demo-note">fill + lazy</span>
      </div>
    </div>
    <p class="demo-note">معاينة عدة صور عبر previewSrcList (انقر الصورة الأولى للتنقل بينها)</p>
    <LhImage :src="src" alt="مدخل معاينة عدة صور" fit="cover" preview :preview-src-list="gallery" />
  </div>
</template>

<script>
export default {
  data: () => ({
    src: 'data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27240%27%20height=%27160%27%3E%3Crect%20width=%27240%27%20height=%27160%27%20fill=%27%23e8e2d5%27/%3E%3Cpath%20d=%27M0%20115%20Q60%2080%20120%20115%20T240%20115%20V160%20H0%20Z%27%20fill=%27%23c9c2b2%27/%3E%3Ctext%20x=%2750%%27%20y=%2767%27%20font-size=%2718%27%20fill=%27%232b4c7c%27%20text-anchor=%27middle%27%20font-family=%27serif%27%3E%E6%BA%AA%E5%B1%B1%E8%A1%8C%E6%97%85%E5%9B%BE%3C/text%3E%3C/svg%3E',
    gallery: [
      'data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27640%27%20height=%27420%27%3E%3Crect%20width=%27640%27%20height=%27420%27%20fill=%27%23e8e2d5%27/%3E%3Cpath%20d=%27M0%20302%20Q160%20210%20320%20302%20T640%20302%20V420%20H0%20Z%27%20fill=%27%23c9c2b2%27/%3E%3Ctext%20x=%2750%%27%20y=%27176%27%20font-size=%2740%27%20fill=%27%232b4c7c%27%20text-anchor=%27middle%27%20font-family=%27serif%27%3E%E7%AC%AC%E4%B8%80%E5%B9%85%3C/text%3E%3C/svg%3E',
      'data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27640%27%20height=%27420%27%3E%3Crect%20width=%27640%27%20height=%27420%27%20fill=%27%23e8e2d5%27/%3E%3Cpath%20d=%27M0%20302%20Q160%20210%20320%20302%20T640%20302%20V420%20H0%20Z%27%20fill=%27%23c9c2b2%27/%3E%3Ctext%20x=%2750%%27%20y=%27176%27%20font-size=%2740%27%20fill=%27%232b4c7c%27%20text-anchor=%27middle%27%20font-family=%27serif%27%3E%E7%AC%AC%E4%BA%8C%E5%B9%85%3C/text%3E%3C/svg%3E',
      'data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27640%27%20height=%27420%27%3E%3Crect%20width=%27640%27%20height=%27420%27%20fill=%27%23e8e2d5%27/%3E%3Cpath%20d=%27M0%20302%20Q160%20210%20320%20302%20T640%20302%20V420%20H0%20Z%27%20fill=%27%23c9c2b2%27/%3E%3Ctext%20x=%2750%%27%20y=%27176%27%20font-size=%2740%27%20fill=%27%232b4c7c%27%20text-anchor=%27middle%27%20font-family=%27serif%27%3E%E7%AC%AC%E4%B8%89%E5%B9%85%3C/text%3E%3C/svg%3E',
    ],
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
src	عنوان الصورة	string	—
alt	نص بديل (مطلوب بقوة في a11y، إلزامي في طبقة TS)	string	—
fit	وضع القص (object-fit الأصلية)	'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'	'cover'
preview	هل يمكن النقر للمعاينة	boolean	false
previewSrcList	قائمة صور المعاينة (إذا لم تُمرّر تتحول إلى [src])	string[]	—
lazy	تحميل كسول أصلي (loading="lazy")	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

ImageViewer Props

عارض مُصدَّر بشكل مستقل: images (قائمة صور المعاينة)، وinitialIndex (الفهرس الابتدائي، الافتراضي 0).

تلميح

يحتوي preview في LhImage على عارض مُدمج، لذا نادراً ما تحتاج إلى استخدام LhImageViewer مباشرة في أغلب السيناريوهات.