Skip to content

Image

图片状态基座:统一 loading、loaded、error、fit、尺寸和占位内容。

运行时归属

useImageRoot 来自 @varo-ui/headless;H5 使用 img,小程序使用原生 image。

演示

安装包@varo-ui/headless
Varo runtime mark
Loading

安装

bash
pnpm add @varo-ui/headless @varo-ui/h5
# 或
pnpm add @varo-ui/headless @varo-ui/weapp

为什么是基础能力

  • 头像、商品图和生成图片都需要稳定的加载与失败状态。
  • 占位和错误视觉可由 wrapper 或 slot 决定。

Parts

Part作用
ImageRoot图片状态、尺寸、fit 与 loading/error slots

状态与事件

  • 状态:srcfitwidthheightroundlazyLoad
  • 事件:loaderrorclick

平台说明

状态契约一致;图片元素、懒加载和 object fit 由目标运行时实现。

相关文档