Изображение

Изображение с заполнителем при ошибке загрузки и опциональным полноэкранным просмотром (масштаб / поворот / переключение между несколькими снимками). Нативные loading="lazy" + decoding="async".

Базовое использование

Базовое использование

<script setup lang="ts">
</script>

<template>
  <!-- Базовое использование -->
  <LhImage src="https://picsum.photos/240/140" alt="Пример изображения" width="240" style="width: 240px" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Базовое использование -->
  <LhImage src="https://picsum.photos/240/140" alt="Пример изображения" width="240" style="width: 240px" />
</template>

Просмотр

Просмотр по нажатию

<script setup lang="ts">
</script>

<template>
  <!-- Просмотр по нажатию -->
  <LhImage
    src="https://picsum.photos/240/140?random=2"
    alt="Изображение с просмотром"
    preview
    :preview-src-list="['https://picsum.photos/600/400?random=2', 'https://picsum.photos/600/400?random=3']"
    style="width: 240px"
  />
</template>

<script>
export default {}
</script>

<template>
  <!-- Просмотр по нажатию -->
  <LhImage
    src="https://picsum.photos/240/140?random=2"
    alt="Изображение с просмотром"
    preview
    :preview-src-list="['https://picsum.photos/600/400?random=2', 'https://picsum.photos/600/400?random=3']"
    style="width: 240px"
  />
</template>

Кадрирование и ленивая загрузка

fit соответствует нативному object-fit; lazy включает нативную ленивую загрузку (изображение загружается при попадании в область просмотра). Просмотрщик LhImageViewer можно использовать самостоятельно — он принимает images и initial-index.

Режимы кадрирования fit

Ленивая загрузка

<script setup lang="ts">
</script>

<template>
  <!-- Режимы кадрирования fit -->
  <LhImage
    v-for="f in ['fill', 'contain', 'cover', 'none', 'scale-down']"
    :key="f"
    src="https://picsum.photos/240/140"
    :alt="`fit=${f}`"
    :fit="f"
    style="width: 110px; height: 80px"
  />
  <!-- Ленивая загрузка -->
  <div style="max-height: 120px; overflow-y: auto; width: 100%">
    <LhImage
      v-for="i in 4"
      :key="i"
      :src="`https://picsum.photos/240/120?random=${i}`"
      :alt="`Изображение ${i} с ленивой загрузкой`"
      lazy
      style="width: 240px; display: block; margin-bottom: 8px"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- Режимы кадрирования fit -->
  <LhImage
    v-for="f in ['fill', 'contain', 'cover', 'none', 'scale-down']"
    :key="f"
    src="https://picsum.photos/240/140"
    :alt="`fit=${f}`"
    :fit="f"
    style="width: 110px; height: 80px"
  />
  <!-- Ленивая загрузка -->
  <div style="max-height: 120px; overflow-y: auto; width: 100%">
    <LhImage
      v-for="i in 4"
      :key="i"
      :src="`https://picsum.photos/240/120?random=${i}`"
      :alt="`Изображение ${i} с ленивой загрузкой`"
      lazy
      style="width: 240px; display: block; margin-bottom: 8px"
    />
  </div>
</template>

Самостоятельный просмотрщик

LhImageViewer можно использовать независимо от LhImage: в images передаётся список изображений, а initial-index задаёт исходное изображение.

Самостоятельный просмотрщик

<script setup lang="ts">
</script>

<template>
  <!-- Самостоятельный просмотрщик -->
  <LhImageViewer
    :images="['https://picsum.photos/600/400?random=11', 'https://picsum.photos/600/400?random=12']"
    :initial-index="1"
  >
    <LhButton>Открыть галерею (начиная со 2-го снимка)</LhButton>
  </LhImageViewer>
</template>

<script>
export default {}
</script>

<template>
  <!-- Самостоятельный просмотрщик -->
  <LhImageViewer
    :images="['https://picsum.photos/600/400?random=11', 'https://picsum.photos/600/400?random=12']"
    :initial-index="1"
  >
    <LhButton>Открыть галерею (начиная со 2-го снимка)</LhButton>
  </LhImageViewer>
</template>

API

LhImage Props

Свойство	Описание	Тип	По умолчанию
src	Адрес изображения	string	—
alt	Альтернативный текст (строгое требование a11y, obligatory на уровне TS)	string	—
fit	Режим кадрирования (нативный object-fit)	"contain" | "cover" | "fill" | "none" | "scale-down"	'cover'
preview	Доступен ли просмотр по нажатию	boolean	false
previewSrcList	Список изображений для просмотра (если не передан, сводится к [src])	string[]	—
lazy	Нативная ленивая загрузка (loading="lazy")	boolean	false
sx	Свойство быстрой компоновки sx	LhSxProps	—

LhImageViewer Props

Свойство	Описание	Тип	По умолчанию
images	Список изображений для просмотра	string[]	—
initialIndex	Индекс исходного изображения	number	0
sx	Свойство быстрой компоновки sx (применяется к изображению для просмотра)	LhSxProps	—

Events

Событие	Описание	Параметр обратного вызова
load	Срабатывает при успешной загрузке изображения	(event: Event)
error	Срабатывает при ошибке загрузки изображения (замещается заполнителем ошибки)	(event: Event)

Слоты: error (заполнитель ошибки), placeholder.

LhImageViewer экспортируется отдельно; также можно слушать события close (закрытие просмотра, в том числе по Esc) и switch (переключение изображения, включая стрелки).

Доступность

• alt обязателен на уровне TS — изображения без альтернативного текста исключены
• Просмотрщик: role="dialog" + aria-modal="true", удержание фокуса, закрытие по Esc, переключение стрелками; все кнопки инструментов поименованы (увеличить / уменьшить / повернуть / предыдущее / следующее / закрыть)
• Переходы поворота и масштабирования уважают prefers-reduced-motion

Типы

Структура открытых TypeScript-типов этого компонента (автоматически извлечено из packages/components/image/src/types.ts и исходников @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhImageProps

export interface LhImageProps {
  /** Адрес изображения */
  src: string
  /** Альтернативный текст (строгое требование a11y, obligatory на уровне TS) */
  alt: string
  /** Режим кадрирования (нативный object-fit) */
  fit?: LhImageFit
  /** Доступен ли просмотр по нажатию */
  preview?: boolean
  /** Список изображений для просмотра (если не передан, сводится к [src]) */
  previewSrcList?: string[]
  /** Нативная ленивая загрузка (loading="lazy") */
  lazy?: boolean
  /** Свойство быстрой компоновки sx */
  sx?: LhSxProps
}

LhImageViewerProps

/** Props просмотрщика (LhImageViewer экспортируется отдельно) */
export interface LhImageViewerProps {
  /** Список изображений для просмотра */
  images: string[]
  /** Исходный индекс */
  initialIndex?: number
  /** Свойство быстрой компоновки sx (применяется к изображению для просмотра) */
  sx?: LhSxProps
}

LhImageFit _{(из @lh-ui/share/core/image)}

/** Режим кадрирования изображения (нативный object-fit) */
export type LhImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Константы

Открытые константы, используемые этим компонентом (можно перейти сюда по одноимённой записи в столбце «Тип / По умолчанию» таблицы Props):

LH_IMAGE_ZOOM_MIN _{(из @lh-ui/share/core/image)}

/** Граница масштабирования */
export const LH_IMAGE_ZOOM_MIN = 0.25

LH_IMAGE_ZOOM_MAX _{(из @lh-ui/share/core/image)}

export const LH_IMAGE_ZOOM_MAX = 4

LH_IMAGE_ZOOM_STEP _{(из @lh-ui/share/core/image)}

export const LH_IMAGE_ZOOM_STEP = 0.25