Image

Yuklanish skeleton'i, xato holati, lightbox oldindan ko'rish, izohlar va lazy loading bilan kengaytirilgan rasm komponenti.

vue

<script setup lang="ts">
import { VxImage } from 'veloxui'
</script>

<template>
  <VxImage src="https://picsum.photos/300/200" alt="Mountain" :width="280" :height="180" :radius="8" />
</template>

Object Fit

fit prop'i yordamida rasmning konteynerni qanday to'ldirishini boshqaring.

cover

contain

fill

none

scale-down

vue

<template>
  <VxImage src="..." fit="cover" />
  <VxImage src="..." fit="contain" />
  <VxImage src="..." fit="fill" />
  <VxImage src="..." fit="none" />
  <VxImage src="..." fit="scale-down" />
</template>

preview'ni yoqing, shunda rasmni bosib to'liq ekranli lightbox'ni ochish mumkin bo'ladi. Yopish uchun Escape tugmasini bosing yoki tashqarisiga bosing.

vue

<script setup lang="ts">
import { VxImage } from 'veloxui'
</script>

<template>
  <!-- Click to open lightbox -->
  <VxImage src="https://picsum.photos/800/500" preview />

  <!-- With caption in lightbox -->
  <VxImage src="..." preview caption="New York City at sunset" />
</template>

Caption

Architecture — Photo by **VeloxUI Team**

vue

<template>
  <!-- String caption -->
  <VxImage src="..." caption="A peaceful mountain lake" />

  <!-- Custom caption slot -->
  <VxImage src="...">
    <template #caption>
      <span>Photo by <strong>VeloxUI Team</strong></span>
    </template>
  </VxImage>
</template>

Border Radius

vue

<template>
  <VxImage src="..." :radius="0" />     <!-- sharp -->
  <VxImage src="..." :radius="8" />     <!-- rounded -->
  <VxImage src="..." :radius="16" />    <!-- more rounded -->
  <VxImage src="..." radius="50%" />    <!-- circle -->
</template>

Error Fallback

Rasm yuklanmaganda placeholder ko'rsatiladi. Muqobil rasm uchun fallback URL'ni bering yoki o'zgartirilgan kontent uchun error slot'dan foydalaning.

Default error

Fallback image

Custom error slot

vue

<template>
  <!-- Default error state -->
  <VxImage src="https://broken.url" />

  <!-- Fallback image -->
  <VxImage src="https://broken.url" fallback="https://picsum.photos/200/140" />

  <!-- Custom error slot -->
  <VxImage src="https://broken.url">
    <template #error>
      <div>Image unavailable</div>
    </template>
  </VxImage>
</template>

Lazy Loading

Rasm viewport'ga kirguncha yuklashni kechiktirish uchun lazy'ni qo'shing. Native loading="lazy" dan foydalanadi.

vue

<template>
  <VxImage src="https://picsum.photos/800/500" lazy />
</template>

Srcset & Sizes

Retina va turli viewport o'lchamlari uchun responsive manbalarni taqdim eting.

vue

<template>
  <VxImage
    src="photo-400.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  />
</template>

Props

Prop	Type	Default	Description
`src`	`string`	`''`	Rasm manba URL'i
`alt`	`string`	`''`	Alt matn
`width`	`number \| string`	—	Rasm eni
`height`	`number \| string`	—	Rasm balandligi
`fit`	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`	Object-fit rejimi
`lazy`	`boolean`	`false`	Native lazy loading
`preview`	`boolean`	`false`	Bosganda lightbox'ni yoqish
`fallback`	`string`	`''`	Xato yuz berganda zaxira rasm URL'i
`radius`	`number \| string`	`0`	Chegara radiusi
`srcset`	`string`	`''`	Responsive srcset
`sizes`	`string`	`''`	Responsive o'lchamlar
`caption`	`string`	`''`	Rasm ostidagi izoh matni

Events

Event	Type	Description
`load`	`(event)`	Rasm muvaffaqiyatli yuklandi
`error`	`(event)`	Rasmni yuklab bo'lmadi
`close`	`()`	Preview lightbox yopildi

Slots

Slot	Description
`error`	O'zgartirilgan xato holati kontenti
`caption`	O'zgartirilgan izoh kontenti

ImageViewer

Masshtab, aylantirish, akslantirish, siljitish, klaviatura navigatsiyasi, thumbnails va galereya qo'llab-quvvatlashi bilan to'liq ekranli rasm ko'ruvchisi.

Gallery

Ko'ruvchini ochish uchun istalgan rasmni bosing. Strelka tugmalaridan foydalaning, masshtab uchun sichqoncha g'ildiragini aylantiring va siljitish uchun sudrab olib boring.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VxImage, VxImageViewer } from 'veloxui'

const viewerOpen = ref(false)
const viewerIdx = ref(0)

const gallery = [
  { src: 'https://picsum.photos/800/600?10', caption: 'Mountain sunrise' },
  { src: 'https://picsum.photos/800/600?11', caption: 'Ocean waves' },
  { src: 'https://picsum.photos/800/600?12', caption: 'Forest trail' },
  { src: 'https://picsum.photos/800/600?13', caption: 'City skyline' },
  { src: 'https://picsum.photos/800/600?14', caption: 'Desert dunes' },
]

function openAt(i: number) {
  viewerIdx.value = i
  viewerOpen.value = true
}
</script>

<template>
  <VxImage v-for="(img, i) in gallery" :key="i" :src="img.src"
    :width="120" :height="90" :radius="8"
    @click="openAt(i)" style="cursor: pointer;" />

  <VxImageViewer
    v-model="viewerOpen"
    :images="gallery"
    :initial-index="viewerIdx"
    show-thumbnails
  />
</template>

Simple (String Array)

Tez foydalanish uchun URL satrlar massivini uzating.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VxImageViewer, VxButton } from 'veloxui'

const open = ref(false)
</script>

<template>
  <VxButton @click="open = true">Open Viewer</VxButton>

  <VxImageViewer
    v-model="open"
    :images="[
      'https://picsum.photos/800/600?20',
      'https://picsum.photos/800/600?21',
      'https://picsum.photos/800/600?22',
    ]"
  />
</template>

With Thumbnails

vue

<template>
  <VxImageViewer :images="gallery" show-thumbnails />
</template>

Keyboard Shortcuts

Key	Action
`←`	Oldingi rasm
`→`	Keyingi rasm
`+` / `=`	Kattalashtirish
`-`	Kichiklashtirish
`R`	O'ngga 90 gradus aylantirish
`0`	Tiklash (ekranga moslash)
`Esc`	Ko'ruvchini yopish

Asboblar paneli quyidagilarni o'z ichiga oladi: kichiklashtirish, masshtab foizi, kattalashtirish, chapga aylantirish, o'ngga aylantirish, gorizontal akslantirish, vertikal akslantirish, moslashga qaytarish.

Sichqoncha g'ildiragi kattalashtiradi/kichiklashtiradi. 100% dan katta masshtabda rasmni siljitish uchun bosib, sudrab olib boring.

ImageViewer Props

Prop	Type	Default	Description
`images`	`(string \| ImageViewerItem)[]`	`[]`	Rasm URL'lari yoki obyektlari massivi
`modelValue`	`boolean`	`false`	Ko'ruvchini ko'rsatish/yashirish (v-model)
`initialIndex`	`number`	`0`	Boshlang'ich rasm indeksi
`zoomStep`	`number`	`0.25`	Har bir qadamdagi masshtab o'sishi
`minZoom`	`number`	`0.5`	Minimal masshtab darajasi
`maxZoom`	`number`	`5`	Maksimal masshtab darajasi
`loop`	`boolean`	`true`	Oxirida navigatsiyani takrorlash
`showToolbar`	`boolean`	`true`	Pastki asboblar panelini ko'rsatish
`showCounter`	`boolean`	`true`	"1 / 5" hisoblagichini ko'rsatish
`showThumbnails`	`boolean`	`false`	Thumbnail chizig'ini ko'rsatish

ImageViewer Events

Event	Type	Description
`update:modelValue`	`(boolean)`	Ko'ruvchi ochildi/yopildi
`change`	`(index: number)`	Faol rasm o'zgardi
`close`	`()`	Ko'ruvchi yopildi

ImageViewerItem Interface

interface ImageViewerItem {
  src: string
  alt?: string
  caption?: string
}

Exposed Methods

Method	Description
`prev()`	Oldingi rasmga o'tish
`next()`	Keyingi rasmga o'tish
`goTo(index)`	Ma'lum bir rasmga o'tish
`zoomIn()`	`zoomStep` bo'yicha kattalashtirish
`zoomOut()`	`zoomStep` bo'yicha kichiklashtirish
`rotateLeft()`	Soat miliga teskari 90 gradus aylantirish
`rotateRight()`	Soat mili bo'yicha 90 gradus aylantirish
`reset()`	Masshtab, aylanish, akslantirish va siljishni tiklash
`close()`	Ko'ruvchini yopish

Image ​

Object Fit ​

Preview (Lightbox) ​

Caption ​

Border Radius ​

Error Fallback ​

Lazy Loading ​

Srcset & Sizes ​

Props ​

Events ​

Slots ​

ImageViewer ​

Gallery ​

Simple (String Array) ​

With Thumbnails ​

Keyboard Shortcuts ​

Toolbar Actions ​

ImageViewer Props ​

ImageViewer Events ​

ImageViewerItem Interface ​

Exposed Methods ​