Image 图片

增强型图片组件，支持图片懒加载、骨架屏/加载动画占位、加载失败降级占位、圆角/圆形切割、全屏点击预览与渐显淡入过渡。

---

🎨 基础用法

1. 基础展示与填充模式

通过 src 指定图片地址，mode 继承 UniApp 原生 image 模式（默认 aspectFill）：

<mu-image src="https://picsum.photos/300/200" width="300rpx" height="200rpx" />

---

2. 圆角与圆形头像 (Round & Radius)

支持指定微圆角或一键切换胶囊/圆形头像：

<!-- 自定义圆角 16rpx -->
<mu-image src="https://picsum.photos/200" width="160rpx" height="160rpx" radius="16" />

<!-- 圆形头像 -->
<mu-image src="https://picsum.photos/200" width="120rpx" height="120rpx" round />

---

3. 点击预览大图 (Preview)

设置 preview 为 true，点击图片时自动触发原生的 uni.previewImage 大图全屏预览：

<mu-image
  src="https://picsum.photos/800/600"
  width="240rpx"
  height="180rpx"
  radius="12"
  preview
/>

---

4. 加载中与加载失败占位 (Loading & Error)

当图片加载缓慢或连接失败时，组件会自动显示优雅的流光背景与状态图标：

<!-- 自定义失败提示文本 -->
<mu-image
  src="https://invalid-domain.com/broken.jpg"
  width="200rpx"
  height="200rpx"
  error-text="图片加载失败"
/>

<!-- 插槽自定义加载与失败结构 -->
<mu-image src="..." width="200rpx" height="200rpx">
  <template #loading>
    <text style="font-size: 20rpx; color: #94A3B8;">加载中...</text>
  </template>
  <template #error>
    <text style="font-size: 20rpx; color: #F43F5E;">加载出错</text>
  </template>
</mu-image>

---

🛠️ API 属性与事件

Props 属性

参数	说明	类型	默认值
src	图片资源地址	string	''
mode	图片裁剪模式（详见 UniApp 规范）	string	'aspectFill'
width	宽度（数字默认为 rpx，支持 '100%' 等）	number | string	'100%'
height	高度（数字默认为 rpx，支持 '300rpx' 等）	number | string	'100%'
radius	圆角大小	number | string	0
round	是否展现为圆形头像	boolean	false
lazy-load	是否开启懒加载	boolean	true
show-loading	是否在加载时显示占位动画	boolean	true
show-error	是否在加载失败时显示占位图	boolean	true
loading-icon	加载占位图标	string	'loading'
error-icon	失败占位图标	string	'image'
error-text	失败提示文案	string	''
preview	点击是否自动全屏预览大图	boolean	false
fade	是否开启加载成功后的渐显过渡动画	boolean	true
duration	渐显动画持续时间 (ms)	number | string	300
bg-color	占位背景色彩	string	'rgba(241, 245, 249, 0.6)'

---

Events 事件

事件名	说明	回调参数
@click	点击图片时触发	(event: TouchEvent)
@load	图片成功加载完毕时触发	(event: CustomEvent)
@error	图片加载失败时触发	(event: CustomEvent)

---

Slots 插槽

插槽名	说明
loading	自定义图片加载状态内容
error	自定义图片加载失败状态内容