# 图片

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183669231339118701`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/基础类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

## 一、功能背景及价值用途

【图片】组件主要用于在表单、流程或页面中插入、展示和管理图片，以增强信息的可视化呈现。

## 二、功能使用说明

### 1、功能入口

【页面设计器】-【组件】-【幻灯片】-拖拽至设计器内，图片来源支持选择素材库、本地图片、图片路径（图1）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544384499499135&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 （图1）

### 2、图片来源设置

#### 2.1、素材库

1）新拖拽到设计器的幻灯片组件默认为素材库，点击从素材库选择图片，后支持从封面图片，背景图片，我的图片中选择，选择后图片立即回显在页面（图2）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544534917832754&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图2）

2）添加后，可以删除图片后再更换图片，每次只可上传1张图片（图3）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544633604341845&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图3）

#### 2.2、本地图片

点击上传图片后即可从本地上传，本地上传可选择压缩设置（图4）

压缩设置：默认为原图，支持选择跟随系统设置、压缩质量高、压缩质量中、压缩质量低

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544831072174124&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图4）

#### 2.3、图片路径

图片路径即选取数据集的相关图片字段，且要配合列表组件来使用（图5）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545045884723288&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图5）

### 3、图片其他配置项

#### 3.1、显示设置

1）显示方式：目前有4种显示方式（拉伸、原图、等比例、等比缩放），可通过下拉选项的示意图直观看到这4种方式的显示效果 （图5）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544749509738551&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图5）

1、

图片布局：默认选择为浮动显示，支持选择浮动显示（图6）

2.1）浮动显示”可将图片设置为浮动于设计器、各组件之上一层的效果。

2.2） 选择“浮动显示”时，可设置图片层级，可通过数字来确认图片层级。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544560497623085&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图6）

#### 3.2、位置

当显示方式为浮动显示时，图片位置可通过“位置”设置来控制：（图7）

1）以水平、垂直两个维度控制图片的相对位置，边距位置支持填写正数或负数：

2） 水平偏移问号内容：正数水平往右偏，负数水平往左偏

3） 垂直偏移问号内容：正数垂直往下偏，负数垂直往上偏

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544470269755506&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图7）

#### 3.3、尺寸设置

支持修改图片宽度、高度、旋转角度、不透明度（图8）

2、

支持设置“原图尺寸”：点击后可直接获取原图尺寸显示图片：点击后高度、宽度单位自动调整为px，且读取图片原图宽高写入“宽度”、“高度”字段；原图尺寸显示时，【显示方式】自动切换为“原图”。

3、

支持宽高锁定设置：默认不锁定，宽高比锁定时，修改宽度，自动影响高度；修改高度，自动影响宽度。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544779644878925&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图8）

#### 3.4、其他

图片懒加载：默认关闭，设置图片是否延迟加载（图9）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544985783271432&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图9）

## 三、上下游关联功能点

1、图片数据源支持添加动态参数

数据集具体使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1160524116543250563&freepass_doc=1&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478")

2、组件标题和底部使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159789715744890921&freepass_doc=1&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250")

3、事件动作使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159192088358584536&freepass_doc=1&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693")

4、素材库使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docDetail/1126866399232238076](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159159175864811571&freepass_doc=1&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docDetail/1126866399232238076")
