Image

Image avec espace réservé en cas d'échec de chargement, avec option de prévisualisation plein écran (zoom / rotation / parcours de plusieurs images). Utilise les attributs natifs loading="lazy" + decoding="async".

Utilisation de base

Utilisation de base

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

<template>
  <!-- Utilisation de base -->
  <LhImage src="https://picsum.photos/240/140" alt="Image d'exemple" width="240" style="width: 240px" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Utilisation de base -->
  <LhImage src="https://picsum.photos/240/140" alt="Image d'exemple" width="240" style="width: 240px" />
</template>

Prévisualisation

Prévisualisation au clic

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

<template>
  <!-- Prévisualisation au clic -->
  <LhImage
    src="https://picsum.photos/240/140?random=2"
    alt="Image prévisualisable"
    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>
  <!-- Prévisualisation au clic -->
  <LhImage
    src="https://picsum.photos/240/140?random=2"
    alt="Image prévisualisable"
    preview
    :preview-src-list="['https://picsum.photos/600/400?random=2', 'https://picsum.photos/600/400?random=3']"
    style="width: 240px"
  />
</template>

Recadrage et chargement différé

fit correspond à la propriété native object-fit ; lazy active le chargement différé natif (le chargement n'a lieu qu'à l'entrée dans la zone d'affichage). La visionneuse LhImageViewer peut être utilisée de manière autonome et reçoit images et initial-index.

Modes de recadrage fit

Chargement différé

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

<template>
  <!-- Modes de recadrage 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"
  />
  <!-- Chargement différé -->
  <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="`Image à chargement différé ${i}`"
      lazy
      style="width: 240px; display: block; margin-bottom: 8px"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- Modes de recadrage 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"
  />
  <!-- Chargement différé -->
  <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="`Image à chargement différé ${i}`"
      lazy
      style="width: 240px; display: block; margin-bottom: 8px"
    />
  </div>
</template>

Visionneuse autonome

LhImageViewer peut être utilisé indépendamment de LhImage : images reçoit la liste d'images et initial-index désigne l'image de départ.

Visionneuse autonome

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

<template>
  <!-- Visionneuse autonome -->
  <LhImageViewer
    :images="['https://picsum.photos/600/400?random=11', 'https://picsum.photos/600/400?random=12']"
    :initial-index="1"
  >
    <LhButton>Ouvrir la galerie (à partir de la 2ᵉ)</LhButton>
  </LhImageViewer>
</template>

<script>
export default {}
</script>

<template>
  <!-- Visionneuse autonome -->
  <LhImageViewer
    :images="['https://picsum.photos/600/400?random=11', 'https://picsum.photos/600/400?random=12']"
    :initial-index="1"
  >
    <LhButton>Ouvrir la galerie (à partir de la 2ᵉ)</LhButton>
  </LhImageViewer>
</template>

API

LhImage Props

Propriété	Description	Type	Valeur par défaut
src	Adresse de l'image	string	—
alt	Texte alternatif (exigence forte d'accessibilité, obligatoire au niveau TS)	string	—
fit	Mode de recadrage (object-fit natif)	"contain" | "cover" | "fill" | "none" | "scale-down"	'cover'
preview	Prévisualisation au clic	boolean	false
previewSrcList	Liste des images à prévisualiser (en l'absence de valeur, repli sur [src])	string[]	—
lazy	Chargement différé natif (loading="lazy")	boolean	false
sx	Propriétés de mise en page rapide sx	LhSxProps	—

LhImageViewer Props

Propriété	Description	Type	Valeur par défaut
images	Liste des images à prévisualiser	string[]	—
initialIndex	Indice de l'image affichée au départ	number	0
sx	Propriétés de mise en page rapide sx (appliquées à l'image prévisualisée)	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
load	Déclenché lorsque l'image est chargée avec succès	(event: Event)
error	Déclenché en cas d'échec de chargement de l'image (bascule vers l'espace réservé d'échec)	(event: Event)

Slots : error (espace réservé d'échec), placeholder.

LhImageViewer est exporté séparément et permet également d'écouter les événements close (fermeture de la prévisualisation, également déclenchée par Échap) et switch (changement d'image, y compris par les flèches directionnelles).

Accessibilité

• alt est obligatoire au niveau TS, afin d'exclure toute image sans texte alternatif
• La visionneuse repose sur role="dialog" + aria-modal="true", avec piège de focus, fermeture par Échap et changement d'image par les flèches ; tous les boutons de la barre d'outils sont nommés (agrandir / réduire / pivoter / image précédente / image suivante / fermer)
• Les transitions de rotation et de zoom respectent prefers-reduced-motion

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/image/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhImageProps

export interface LhImageProps {
  /** Adresse de l'image */
  src: string
  /** Texte alternatif (exigence forte d'accessibilité, obligatoire au niveau TS) */
  alt: string
  /** Mode de recadrage (object-fit natif) */
  fit?: LhImageFit
  /** Prévisualisation au clic */
  preview?: boolean
  /** Liste des images à prévisualiser (en l'absence de valeur, repli sur [src]) */
  previewSrcList?: string[]
  /** Chargement différé natif (loading="lazy") */
  lazy?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhImageViewerProps

/** Props de la visionneuse (LhImageViewer est exporté séparément) */
export interface LhImageViewerProps {
  /** Liste des images à prévisualiser */
  images: string[]
  /** Indice de départ */
  initialIndex?: number
  /** Propriétés de mise en page rapide sx (appliquées à l'image prévisualisée) */
  sx?: LhSxProps
}

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

/** Mode de recadrage de l'image (object-fit natif) */
export type LhImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Constantes

Les constantes publiques utilisées par ce composant sont les suivantes (cliquez sur l'entrée correspondante dans la colonne « Type / Valeur par défaut » du tableau Props pour y accéder) :

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

/** Limite de zoom inférieure */
export const LH_IMAGE_ZOOM_MIN = 0.25

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

/** Limite de zoom supérieure */
export const LH_IMAGE_ZOOM_MAX = 4

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

/** Pas de zoom */
export const LH_IMAGE_ZOOM_STEP = 0.25