图片集

1. 组件概述

图片集是一个内容展示组件，用于在页面上展示多张图片。它支持两种展示模式：缩略图模式和大图模式。在缩略图模式下，多张图片以小图形式排列展示，点击可放大查看；在大图模式下，图片以轮播方式展示，支持左右滑动切换。图片集适用于需要展示多张相关图片的场景，如 AI 生成的图片结果展示、学习资料图片集、历史图片对比等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 绘画结果展示。用户输入描述后，AI 工作流生成多张图片，使用图片集组件展示这些生成结果。选择「缩略图模式」并开启「图片放大功能」，用户可以快速浏览所有生成的图片，点击感兴趣的图片放大查看细节。
• 场景二：历史事件图片集。在历史情景模拟类应用中，展示某个历史事件的多张相关图片。选择「大图模式」，用户可以通过左右滑动逐张浏览图片，配合图片标题和描述了解每张图片的历史背景。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

基本折叠组

配置项	说明
数据源	选择图片数据的来源方式。有两个选项：「关联字段」表示从已有的变量中获取图片数据，适用于图片数据由工作流动态返回的场景；「静态设置」表示直接在此处配置固定的图片列表，适用于图片内容不会变化的场景。
关联数据	当数据源选择「关联字段」时显示。用于绑定一个包含图片数据的变量，该变量应该是一个数组，每个元素包含图片的地址信息。
图片集数据	当数据源选择「静态设置」时显示。用于直接配置图片列表，可以添加多张图片。每张图片可以设置：缩略图地址（小图显示的图片）、原图地址（放大查看时显示的图片）、图片标题、图片描述。
图片集模式	选择图片的展示方式。「缩略图模式」将所有图片以小图形式排列展示，适合需要一次性浏览多张图片的场景；「大图模式」以轮播方式展示图片，每次只显示一张，支持左右滑动切换，适合需要仔细查看每张图片的场景。
图片放大功能	仅在缩略图模式下显示。开启后，点击缩略图可以放大查看原图，并支持在放大状态下左右切换浏览其他图片。建议在需要查看图片细节时开启。
占位图	设置当没有图片数据时显示的默认图片。可以设置一张提示性的图片，告知用户此处暂无内容。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。
隐藏	控制组件是否隐藏。与「可见」相反。

设计

基本折叠组

仅在缩略图模式下显示。

配置项	说明
缩略图展示模式	控制缩略图如何适应显示区域。「宽度占满」让图片宽度撑满容器，高度自适应；「高度占满」让图片高度撑满容器，宽度自适应；「包含」保持图片完整显示，可能会有留白；「铺满」让图片完全覆盖显示区域，可能会裁剪部分内容。
缩略图比率	设置缩略图的宽高比例。可选 1:1（正方形）、4:3（传统照片比例）、16:9（宽屏比例）。根据图片内容选择合适的比例，避免图片变形或过度裁剪。

其他折叠组

仅在大图模式下显示。

配置项	说明
左切换图标	自定义大图模式下向左切换的图标样式。
右切换图标	自定义大图模式下向右切换的图标样式。
切换图标大小	设置左右切换图标的尺寸大小。