Image

图片容器：fit / radius / loading；加载失败可自定义 fallback。

基础

<script setup lang="ts">
import { HImage } from 'happier-ui'
</script>

<template>
  <h-image
    src="/cover.jpg"
    alt="封面"
    :width="120"
    :height="120"
    fit="cover"
    radius="md"
  />
</template>

失败 fallback

<h-image src="…" alt="失败占位示例" :width="96" :height="96">
  <template #fallback>
    <span aria-hidden="true">♫</span>
  </template>
</h-image>

API

Props

名称	类型	默认	说明
src	string	—	必填
alt	string	—	必填；无障碍替代文本
width	string | number	—	宽；数字为 px
height	string | number	—	高；数字为 px
loading	'eager' | 'lazy'	'lazy'	原生 loading
fit	'cover' | 'contain' | 'fill' | 'none' | 'scale-down'	'cover'	object-fit
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'	圆角档位

Slots

名称	说明
fallback	加载失败时的占位内容

Emits

无。

无障碍

• alt 必填
• fallback 为装饰时可用 aria-hidden；勿用 fallback 覆盖真实 alt 语义