Avatar

LhAvatar muestra el avatar de un usuario o de una cosa; admite tres formas: imagen, icono y texto. Si la imagen falla al cargar, retrocede automáticamente.

Uso básico

Avatar de imagen

fit controla el modo de recorte (object-fit nativo) y alt proporciona el texto alternativo.

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

<template>
  <!-- Avatar de imagen -->
  <LhAvatar src="https://api.dicebear.com/9.x/notionists/svg?seed=mo" />
  <!-- Recorte fit + texto alternativo alt -->
  <LhAvatar
    src="https://api.dicebear.com/9.x/notionists/svg?seed=f"
    fit="cover"
    alt="Avatar del usuario"
  />
</template>

<script>
export default {}
</script>

<template>
  <!-- Avatar de imagen -->
  <LhAvatar src="https://api.dicebear.com/9.x/notionists/svg?seed=mo" />
  <!-- Recorte fit + texto alternativo alt -->
  <LhAvatar
    src="https://api.dicebear.com/9.x/notionists/svg?seed=f"
    fit="cover"
    alt="Avatar del usuario"
  />
</template>

Forma y tamaño

Redondo y cuadrado, cuatro tamaños

PMGR

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

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar
      shape="square"
      size="small"
      text="Pequeño"
    />
    <LhAvatar
      shape="square"
      size="medium"
      text="Mediano"
    />
    <LhAvatar
      shape="square"
      size="large"
      text="Grande"
    />
    <LhAvatar
      size="large"
      text="Redondo"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar
      shape="square"
      size="small"
      text="Pequeño"
    />
    <LhAvatar
      shape="square"
      size="medium"
      text="Mediano"
    />
    <LhAvatar
      shape="square"
      size="large"
      text="Grande"
    />
    <LhAvatar
      size="large"
      text="Redondo"
    />
  </div>
</template>

Retroceso a texto e icono

Sin imagen, se retrocede en el orden icon y text

TA

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

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar text="Tinta china" />
    <LhAvatar icon="user" />
    <LhAvatar text="Alice Chen" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar text="Tinta china" />
    <LhAvatar icon="user" />
    <LhAvatar text="Alice Chen" />
  </div>
</template>

El avatar de texto toma automáticamente el primer carácter (en chino, el primer carácter; en latín, la primera letra en mayúscula).

Fallo de carga de la imagen

Tras el fallo, retrocede a text y dispara el evento error

<template>
  <LhAvatar
    src="/broken-avatar.png"
    text="Reserva"
    @error="onError"
  />
</template>

<script setup lang="ts">
function onError(e: Event) {
  console.log('avatar load error', e)
}
</script>

<template>
  <LhAvatar
    src="/broken-avatar.png"
    text="Reserva"
    @error="onError"
  />
</template>

<script>
export default {
  methods: {
    onError(e) {
      console.log('avatar load error', e)
    },
  },
}
</script>

API

Props

Prop	Descripción	Tipo	Predeterminado
src	URL de la imagen; si está vacía, retrocede a icono/texto	string	—
alt	Texto alternativo	string	—
icon	Nombre del icono (iconos integrados de LhIcon; se muestra si falta src)	LhIconName	—
text	Contenido de texto (si faltan src e icon, se muestra el primer carácter)	string	—
shape	Forma del avatar	"circle" | "square"	'circle'
size	Tamaño del avatar	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
fit	Modo de carga de la imagen: fill / contain / cover	"fill" | "contain" | "cover" | "none" | "scale-down"	'cover'
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros de la retrollamada
error	Se dispara cuando la imagen falla al cargar	(e: Event)

Accesibilidad

• En modo imagen, el propio <img alt> aporta el texto alternativo; si no se pasa alt, se retrocede a text y luego a avatar
• En modo icono / texto, el elemento raíz asume role="img"; si se pasa alt, actúa como nombre accesible; el propio icono se marca como aria-hidden

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/avatar/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):

LhAvatarProps

export interface LhAvatarProps {
  /** URL de la imagen; si está vacía, retrocede sucesivamente a icono y texto */
  src?: string
  /** Texto alternativo cuando la imagen falla al cargar; actúa también como alt */
  alt?: string
  /** Nombre del icono (se muestra si src está vacío o falla; iconos integrados de LhIcon) */
  icon?: LhIconName
  /** Contenido del avatar de texto (si faltan src e icon, se muestra el primer carácter) */
  text?: string
  /** Forma del avatar */
  shape?: LhAvatarComponentShape
  /** Tamaño del avatar */
  size?: LhAvatarSize
  /** Modo de carga de la imagen: fill / contain / cover */
  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhAvatarSize

export type LhAvatarSize = LhComponentSize

LhAvatarShape

export type LhAvatarShape = LhAvatarComponentShape

LhAvatarComponentShape _{(de @lh-ui/share/core/avatar)}

export type LhAvatarShape = 'circle' | 'square'

LhIconName _{(de @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhComponentSize _{(de @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]