Images 图片集

图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像Service、Form或CRUD这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过source属性，获取数据链中的数据，完成数据展示。

基本用法

通过 source 关联上下文数据，或者通过 name 关联。

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "imageList": [
  5.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  6.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  8.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  9.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
  10.         ]
  11.     },
  12.     "body": [
  13.         {
  14.             "type": "images",
  15.             "source": "${imageList}"
  16.         },
  17.         {
  18.             "type": "divider"
  19.         },
  20.         {
  21.             "type": "images",
  22.             "name": "imageList"
  23.         }
  24.     ]
  25. }

也可以静态展示，即不关联数据固定显示。

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "images",
  5.         "options": [
  6.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  8.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  9.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  10.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
  11.         ]
  12.     }
  13. }

值格式

除了支持纯文本数组以外，也支持对象数组，如：

  1. Array<{
  2.     image: string; // 小图，预览图
  3.     src?: string; // 原图
  4.     title?: string; // 标题
  5.     description?: string; // 描述
  6.     [propName:string]: any; // 还可以有其他数据
  7. }>

配置预览图地址

需要设置对象中预览图地址的key值为image

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "images": [
  5.             {
  6.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.                 "a": "aaa1",
  8.                 "b": "bbb1"
  9.             },
  10.             {
  11.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  12.                 "a": "aaa2",
  13.                 "b": "bbb2"
  14.             },
  15.             {
  16.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  17.                 "a": "aaa3",
  18.                 "b": "bbb3"
  19.             },
  20.             {
  21.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  22.                 "a": "aaa4",
  23.                 "b": "bbb4"
  24.             },
  25.             {
  26.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  27.                 "a": "aaa5",
  28.                 "b": "bbb5"
  29.             }
  30.         ]
  31.     },
  32.     "body": {
  33.         "type": "images",
  34.         "source": "${images}"
  35.     }
  36. }

如果key值不是image，也可以在 images 组件 上，通过配置src，使用数据映射，来获取图片地址

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "images": [
  5.             {
  6.                 "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.                 "a": "aaa1",
  8.                 "b": "bbb1"
  9.             },
  10.             {
  11.                 "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  12.                 "a": "aaa2",
  13.                 "b": "bbb2"
  14.             },
  15.             {
  16.                 "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  17.                 "a": "aaa3",
  18.                 "b": "bbb3"
  19.             },
  20.             {
  21.                 "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  22.                 "a": "aaa4",
  23.                 "b": "bbb4"
  24.             },
  25.             {
  26.                 "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  27.                 "a": "aaa5",
  28.                 "b": "bbb5"
  29.             }
  30.         ]
  31.     },
  32.     "body": {
  33.         "type": "images",
  34.         "source": "${images}",
  35.         "src": "${img}"
  36.     }
  37. }

配置原图地址

需要设置对象中原图地址的key值为src

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "images": [
  5.             {
  6.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  8.                 "a": "aaa1",
  9.                 "b": "bbb1"
  10.             },
  11.             {
  12.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  13.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg",
  14.                 "a": "aaa2",
  15.                 "b": "bbb2"
  16.             },
  17.             {
  18.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  19.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg",
  20.                 "a": "aaa3",
  21.                 "b": "bbb3"
  22.             },
  23.             {
  24.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  25.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg",
  26.                 "a": "aaa4",
  27.                 "b": "bbb4"
  28.             },
  29.             {
  30.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  31.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg",
  32.                 "a": "aaa5",
  33.                 "b": "bbb5"
  34.             }
  35.         ]
  36.     },
  37.     "body": {
  38.         "type": "images",
  39.         "source": "${images}",
  40.         "enlargeAble": true
  41.     }
  42. }

如果原图数据的key值不是src，也可以在 images 组件 上，通过配置originalSrc，使用数据映射，来获取原图片地址

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "images": [
  5.             {
  6.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.                 "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  8.                 "a": "aaa1",
  9.                 "b": "bbb1"
  10.             },
  11.             {
  12.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  13.                 "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  14.                 "a": "aaa2",
  15.                 "b": "bbb2"
  16.             },
  17.             {
  18.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  19.                 "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  20.                 "a": "aaa3",
  21.                 "b": "bbb3"
  22.             },
  23.             {
  24.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  25.                 "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  26.                 "a": "aaa4",
  27.                 "b": "bbb4"
  28.             },
  29.             {
  30.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  31.                 "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  32.                 "a": "aaa5",
  33.                 "b": "bbb5"
  34.             }
  35.         ]
  36.     },
  37.     "body": {
  38.         "type": "images",
  39.         "source": "${images}",
  40.         "originalSrc": "${source}",
  41.         "enlargeAble": true
  42.     }
  43. }

配置标题和说明

设置对象中标题的key值为title，说明的key为description或caption。

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "images": [
  5.             {
  6.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.                 "title": "图片1",
  8.                 "description": "图片1的描述"
  9.             },
  10.             {
  11.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  12.                 "title": "图片2",
  13.                 "description": "图片2的描述"
  14.             },
  15.             {
  16.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  17.                 "title": "图片3",
  18.                 "description": "图片3的描述"
  19.             },
  20.             {
  21.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  22.                 "title": "图片4",
  23.                 "description": "图片4的描述"
  24.             },
  25.             {
  26.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  27.                 "title": "图片5",
  28.                 "description": "图片5的描述"
  29.             }
  30.         ]
  31.     },
  32.     "body": {
  33.         "type": "images",
  34.         "source": "${images}"
  35.     }
  36. }

显示比例和缩略图模式

比如这个例子配置成 16:9 的比率展示缩略图，并裁剪部分去掉空白。

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "images",
  5.         "thumbRatio": "16:9",
  6.         "thumbMode": "cover",
  7.         "options": [
  8.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  9.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  10.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  11.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  12.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
  13.         ]
  14.     }
  15. }

配置放大预览

在 images 组件 上，配置enlargeAble，支持放大预览

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "images": [
  5.             {
  6.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  7.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  8.                 "title": "图片1",
  9.                 "description": "图片1的描述"
  10.             },
  11.             {
  12.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  13.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  14.                 "title": "图片2",
  15.                 "description": "图片2的描述"
  16.             },
  17.             {
  18.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  19.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  20.                 "title": "图片3",
  21.                 "description": "图片3的描述"
  22.             },
  23.             {
  24.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  25.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  26.                 "title": "图片4",
  27.                 "description": "图片4的描述"
  28.             },
  29.             {
  30.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  31.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
  32.                 "title": "图片5",
  33.                 "description": "图片5的描述"
  34.             }
  35.         ]
  36.     },
  37.     "body": {
  38.         "type": "images",
  39.         "source": "${images}",
  40.         "enlargeAble": true
  41.     }
  42. }

用作 Field 时

当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置name属性，映射同名变量

Table 中的列类型

```schema: scope=”body” { “type”: “table”, “data”: { “items”: [ { “id”: “1”, “images”: [ “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80“ ] }, { “id”: “2”, “images”: [ “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80“ ] }, { “id”: “3”, “images”: [ “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80“, “https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80“ ] } ] }, “columns”: [ { “name”: “id”, “label”: “Id” },

  1.     {
  2.         "name": "images",
  3.         "label": "颜色",
  4.         "type": "images"
  5.     }
  6. ]

}

  2. List 的内容、Card 卡片的内容配置同上
  4. ### Form 中关联数据静态展示
  6. ```schema: scope="body"
  7. {
  8.     "type": "form",
  9.     "data": {
  10.         "images": [
  11.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  12.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  13.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  14.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  15.             "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
  16.         ]
  17.     },
  18.     "body": [
  19.         {
  20.             "type": "static-images",
  21.             "name": "images",
  22.             "label": "图片集"
  23.         }
  24.     ]
  25. }

属性表

属性名 类型 默认值 说明
type string images 如果在 Table、Card 和 List 中，为"images"；在 Form 中用作静态展示，为"static-images"
className string 外层 CSS 类名
defaultImage string 默认展示图片
value string或Array<string>或Array<object> 图片数组
source string 数据源
delimiter string , 分隔符，当 value 为字符串时，用该值进行分隔拆分
src string 预览图地址，支持数据映射获取对象中图片变量
originalSrc string 原图地址，支持数据映射获取对象中图片变量
enlargeAble boolean 支持放大预览
thumbMode string contain 预览图模式，可选：'w-full', 'h-full', 'contain', 'cover'
thumbRatio string 1:1 预览图比例，可选：'1:1', '4:3', '16:9'