圆形图片

分类

配置

示例

说明

内容

图片来源

图片资源的三种模式。

URL

当图片来源为 URL 时生效，值为图片的链接。

系统文件

当图片来源为系统文件时生效，可以选择在内置资源文件中上传的图片，也可以点击下方选框直接上传。

内存对象

当图片来源为内存对象时生效，可以与上传组件关联使用，例如：upload1.values?.[0]，用于一些不需要发生实际上传行为的场景。

热区配置

允许在图像上定义特定区域，点击这些区域可以触发特定的交互行为，增强用户体验。

图片描述

图片加载失败时的展示文案

加载失败容错地址

图片加载失败时，会显示预设的图像占位符

渐进加载

开启「渐进加载」可改善用户体验，避免大图片一次性加载造成的等待感。通过先展示一个精简的预览版（如低分辨率图像、纯色背景或 LQIP ），在完整图像加载完成前优化用户视觉体验。

允许预览

图片预览，用户可以点击图片以打开一个弹出层，查看该图片的高清预览。

预览配置

可以重新定义预览图片路径，默认为当前图片资源。

交互

隐藏

控制图片组件的默认展示状态，为true 时将隐藏组件。详情参见通用属性

样式

高度

组件高度，详情参见通用属性

外边距

详情参见通用属性

填充

指定图片的内容应该如何适应到其使用高度和宽度确定的框。详情参见object-fit属性

• 覆盖：图片在保持其宽高比的同时填充元素的整个内容框

• 包含：图片将被缩放，以在填充元素的内容框时保持其宽高比。

• 拉伸：图片将完全填充组件框。如果图片的宽高比与组件框不相匹配，那么图片将被拉伸以适应组件框。

图片布局

指定图片在包含填充模式下，图片在组件内的位置。

CSS 样式

圆角

图片组件圆角，图片宽高一致且设置圆角为50% 时可实现圆形图片

翻转

图片的翻转模式，支持水平和垂直。定点为图片中心点。详情参见rotate属性

名称

类型

示例

说明

mode

string

circularImage1.mode

图片来源

src

string

circularImage1.src

当前图片组件的链接

file

object

circularImage1.file

只读，图片文件资源

srcFile

object

circularImage1.srcFile

只读，图片内存对象

fallback

string

circularImage1.fallback

只读，图片加载失败时，会显示预设的图像占位符

placeholder

string

circularImage1.placeholder

只读，渐进加载的图片链接

alt

string

circularImage1.alt

只读，图片加载失败时的展示文案

preview

boolean

circularImage1.preview

只读，图片是否可以点击预览

hotAreas

object

circularImage1.hotAreas

只读，图片的热区配置信息

hidden

boolean

circularImage1.hidden

当前组件是否隐藏，详情参见通用属性

setSrc

func

circularImage1.setSrc('图片链接')

设置图片链接为图片链接

clearSrc

func

circularImage1.clearSrc()

清除图片链接

setHidden

func

circularImage1.setHidden(false)

设置图片是否隐藏，参数为true或false，详情参见通用属性

clearHidden

func

circularImage1.clearHidden()

清除图片隐藏状态，详情参见通用属性

配置

说明

当点击图片时将触发的事件

当图片加载失败时将触发的事件