Image

Расширенный компонент изображения со скелетоном загрузки, резервным отображением при ошибке, лайтбокс-превью, подписями и ленивой загрузкой.

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

Управляйте тем, как изображение заполняет контейнер, с помощью prop fit.

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, чтобы клик по изображению открывал полноэкранный лайтбокс. Нажмите Escape или кликните вне изображения, чтобы закрыть.

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

Если изображение не удалось загрузить, показывается заглушка. Передайте URL в fallback для альтернативного изображения или используйте слот error для кастомного содержимого.

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

Добавьте lazy, чтобы отложить загрузку до появления изображения во вьюпорте. Используется нативный loading="lazy".

vue

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

Srcset & Sizes

Передавайте адаптивные источники для retina и разных размеров вьюпорта.

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`	`''`	URL источника изображения
`alt`	`string`	`''`	Альтернативный текст
`width`	`number \| string`	—	Ширина изображения
`height`	`number \| string`	—	Высота изображения
`fit`	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`	Режим object-fit
`lazy`	`boolean`	`false`	Нативная ленивая загрузка
`preview`	`boolean`	`false`	Включить лайтбокс по клику
`fallback`	`string`	`''`	URL резервного изображения при ошибке
`radius`	`number \| string`	`0`	Скругление углов
`srcset`	`string`	`''`	Адаптивный srcset
`sizes`	`string`	`''`	Адаптивные sizes
`caption`	`string`	`''`	Подпись под изображением

Events

Event	Type	Description
`load`	`(event)`	Изображение успешно загружено
`error`	`(event)`	Не удалось загрузить изображение
`close`	`()`	Лайтбокс превью закрыт

Slots

Slot	Description
`error`	Кастомное содержимое для состояния ошибки
`caption`	Кастомное содержимое подписи

ImageViewer

Полноэкранный просмотрщик изображений с масштабированием, поворотом, отражением, панорамированием, управлением с клавиатуры, миниатюрами и поддержкой галерей.

Gallery

Кликните по любому изображению, чтобы открыть просмотрщик. Используйте стрелки, колёсико мыши для масштабирования и перетаскивание для панорамирования.

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)

Передайте массив строк с URL для быстрого использования.

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
`←`	Предыдущее изображение
`→`	Следующее изображение
`+` / `=`	Увеличить
`-`	Уменьшить
`R`	Поворот вправо на 90°
`0`	Сбросить (вписать в экран)
`Esc`	Закрыть просмотрщик

Тулбар включает: уменьшить, процент масштаба, увеличить, повернуть влево, повернуть вправо, отразить по горизонтали, отразить по вертикали, сбросить.

Колёсико мыши масштабирует. При масштабе выше 100% изображение можно перетаскивать для панорамирования.

ImageViewer Props

Prop	Type	Default	Description
`images`	`(string \| ImageViewerItem)[]`	`[]`	Массив URL изображений или объектов
`modelValue`	`boolean`	`false`	Показать/скрыть просмотрщик (v-model)
`initialIndex`	`number`	`0`	Стартовый индекс изображения
`zoomStep`	`number`	`0.25`	Шаг масштабирования
`minZoom`	`number`	`0.5`	Минимальный масштаб
`maxZoom`	`number`	`5`	Максимальный масштаб
`loop`	`boolean`	`true`	Зациклить навигацию на концах
`showToolbar`	`boolean`	`true`	Показывать нижний тулбар
`showCounter`	`boolean`	`true`	Показывать счётчик «1 / 5»
`showThumbnails`	`boolean`	`false`	Показывать полосу миниатюр

ImageViewer Events

Event	Type	Description
`update:modelValue`	`(boolean)`	Просмотрщик открыт/закрыт
`change`	`(index: number)`	Активное изображение изменено
`close`	`()`	Просмотрщик закрыт

ImageViewerItem Interface

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

Exposed Methods

Method	Description
`prev()`	Перейти к предыдущему изображению
`next()`	Перейти к следующему изображению
`goTo(index)`	Перейти к конкретному изображению
`zoomIn()`	Увеличить на `zoomStep`
`zoomOut()`	Уменьшить на `zoomStep`
`rotateLeft()`	Повернуть на 90° против часовой стрелки
`rotateRight()`	Повернуть на 90° по часовой стрелке
`reset()`	Сбросить масштаб, поворот, отражение, панорамирование
`close()`	Закрыть просмотрщик

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 ​