跳到主要内容

图片

用于展示图片的组件。

何时使用​

  • 用于展示图片内容
  • 用于加载大图时显示加载状态或加载失败时的容错提示

一、属性​

1. 数据​

1）数据 - 值​

图片的来源可通过以下方式设置：

  • 图片选择：从本地资源中直接选择图片。
    图片选择界面
    本地图片选择

  • 手动赋值：直接填写图片 URL，支持网络图片资源地址。

  • 数据绑定、视图参数和组件绑定：详见 数据绑定。

2. 功能​

1）支持预览​

当用户需要点击图片查看大图时，可启用此功能。启用后，图片支持点击放大预览。

预览功能示意图

2）错误提示​

图片资源无法访问或加载失败时，可显示错误提示，支持自定义提示内容。

错误提示示意图

3. 外观​

1）宽度 & 高度​

可设置图片的宽度和高度。

宽高设置界面

2）填充模式​

提供以下四种图片填充方式：

  • 拉伸填充：图片会被拉伸填满容器，可能造成变形。
  • 等比缩放：保持图片原始比例，完整显示在容器内，可能出现留白。
  • 等比覆盖：尽可能放大图片，填满整个容器，超出部分将被裁剪。
  • 不缩放：显示图片原始尺寸，不进行缩放处理。

以下为容器尺寸为 100px × 100px 时，各种填充模式的效果示意：

填充模式效果图

填充模式选择界面如下：

填充模式选择界面

3）圆角大小​

支持自定义设置图片圆角大小。

圆角设置示意图

4. 状态​

无特殊状态要求，详见 通用状态。

二、样式​

无特殊样式设置，详见 通用样式。

三、常见使用场景​

1. 在头像框中展示头像​

常用于用户界面，展示个人头像。

头像展示示意图

2. 设置界面背景图片​

图片常用于界面背景装饰。

背景图设置示意图