跳到主要内容

Image 图片

展示和预览图片。


基础用法

点击图像可以放大显示。

填充模式

填充类型

不同填充模式的图片

提供 fill、contain、cover、none、scale-down 5 种填充类型。

填充位置

图片相对于容器的位置。当图片过大时,提供显示图片的局部左侧对齐、或右侧对齐的不同位置。

图片形状

提供方形、圆角矩形、圆角 3 种形状。

图片交互

悬停图片,显示相关操作。

图片加载

大图使用 palceholder 渐进加载,小图使用骨架屏加载。

错误状态

当加载图片失败的时候显示的样式。

何时使用

  • 需要展示图片的时候。
  • 加载大图时显示 loading 或加载失败时容错处理。