Imagen

Imagen con marcador de posición de error de carga y, de forma opcional, vista previa a pantalla completa (zoom / rotación / cambio entre varias imágenes). Emplea loading="lazy" y decoding="async" nativos.

Uso básico

Uso básico

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

<template>
  <!-- Uso básico -->
  <LhImage src="https://picsum.photos/240/140" alt="Imagen de ejemplo" width="240" style="width: 240px" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Uso básico -->
  <LhImage src="https://picsum.photos/240/140" alt="Imagen de ejemplo" width="240" style="width: 240px" />
</template>

Vista previa

Vista previa al hacer clic

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

<template>
  <!-- Vista previa al hacer clic -->
  <LhImage
    src="https://picsum.photos/240/140?random=2"
    alt="Imagen con vista previa"
    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>
  <!-- Vista previa al hacer clic -->
  <LhImage
    src="https://picsum.photos/240/140?random=2"
    alt="Imagen con vista previa"
    preview
    :preview-src-list="['https://picsum.photos/600/400?random=2', 'https://picsum.photos/600/400?random=3']"
    style="width: 240px"
  />
</template>

Recorte y carga diferida

fit equivale al object-fit nativo; lazy activa la carga diferida nativa (la imagen solo se carga cuando entra en el viewport). El visor LhImageViewer puede usarse de forma independiente y recibe images e initial-index.

Modos de recorte fit

Carga diferida

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

<template>
  <!-- Modos de recorte 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"
  />
  <!-- Carga diferida -->
  <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="`Imagen con carga diferida ${i}`"
      lazy
      style="width: 240px; display: block; margin-bottom: 8px"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- Modos de recorte 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"
  />
  <!-- Carga diferida -->
  <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="`Imagen con carga diferida ${i}`"
      lazy
      style="width: 240px; display: block; margin-bottom: 8px"
    />
  </div>
</template>

Visor independiente

LhImageViewer puede usarse de forma independiente, sin depender de LhImage: images recibe la lista de imágenes e initial-index especifica la imagen inicial.

Visor independiente

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

<template>
  <!-- Visor independiente -->
  <LhImageViewer
    :images="['https://picsum.photos/600/400?random=11', 'https://picsum.photos/600/400?random=12']"
    :initial-index="1"
  >
    <LhButton>Abrir la galería (a partir de la 2.ª)</LhButton>
  </LhImageViewer>
</template>

<script>
export default {}
</script>

<template>
  <!-- Visor independiente -->
  <LhImageViewer
    :images="['https://picsum.photos/600/400?random=11', 'https://picsum.photos/600/400?random=12']"
    :initial-index="1"
  >
    <LhButton>Abrir la galería (a partir de la 2.ª)</LhButton>
  </LhImageViewer>
</template>

API

LhImage Props

Prop	Descripción	Tipo	Predeterminado
src	Dirección de la imagen	string	—
alt	Texto alternativo (requisito estricto de a11y; obligatorio a nivel de TS)	string	—
fit	Modo de recorte (object-fit nativo)	"contain" | "cover" | "fill" | "none" | "scale-down"	'cover'
preview	Si se puede hacer clic para abrir la vista previa	boolean	false
previewSrcList	Lista de imágenes de la vista previa (si no se pasa, se reduce a [src])	string[]	—
lazy	Carga diferida nativa (loading="lazy")	boolean	false
sx	Props de disposición rápida	LhSxProps	—

LhImageViewer Props

Prop	Descripción	Tipo	Predeterminado
images	Lista de imágenes de la vista previa	string[]	—
initialIndex	Índice de la imagen inicial de la vista previa	number	0
sx	Props de disposición rápida (aplicadas a la imagen de la vista previa)	LhSxProps	—

Events

Evento	Descripción	Parámetros de la retrollamada
load	Se dispara cuando la imagen se carga correctamente	(event: Event)
error	Se dispara cuando la imagen no puede cargarse (se pasa al marcador de error)	(event: Event)

Slots: error (marcador de error), placeholder.

LhImageViewer se exporta de forma independiente; además, permite escuchar los eventos close (cierre de la vista previa; Esc también lo dispara) y switch (cambio de imagen; incluye las flechas de dirección).

Accesibilidad

• alt es obligatorio a nivel de TS, lo que elimina las imágenes sin texto alternativo
• El visor emplea role="dialog" + aria-modal="true", mantiene el foco encerrado, se cierra con Esc y cambia de imagen con las flechas; todos los botones de la barra de herramientas tienen nombre (acercar / alejar / rotar / anterior / siguiente / cerrar)
• Las transiciones de rotación y zoom respetan prefers-reduced-motion

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/image/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhImageProps

export interface LhImageProps {
  /** Dirección de la imagen */
  src: string
  /** Texto alternativo (requisito estricto de a11y; obligatorio a nivel de TS) */
  alt: string
  /** Modo de recorte (object-fit nativo) */
  fit?: LhImageFit
  /** Si se puede hacer clic para abrir la vista previa */
  preview?: boolean
  /** Lista de imágenes de la vista previa (si no se pasa, se reduce a [src]) */
  previewSrcList?: string[]
  /** Carga diferida nativa (loading="lazy") */
  lazy?: boolean
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhImageViewerProps

/** Props del visor (LhImageViewer se exporta de forma independiente) */
export interface LhImageViewerProps {
  /** Lista de imágenes de la vista previa */
  images: string[]
  /** Índice inicial */
  initialIndex?: number
  /** Props de disposición rápida (aplicadas a la imagen de la vista previa) */
  sx?: LhSxProps
}

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

/** Modo de recorte de la imagen (object-fit nativo) */
export type LhImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Constantes

Las constantes públicas que utiliza este componente (puedes hacer clic en la entrada del mismo nombre en la columna «Tipo / Predeterminado» de la tabla de Props para saltar aquí):

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

/** Límite del zoom */
export const LH_IMAGE_ZOOM_MIN = 0.25

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

/** Límite del zoom */
export const LH_IMAGE_ZOOM_MAX = 4

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

/** Paso del zoom */
export const LH_IMAGE_ZOOM_STEP = 0.25