图片
开发者可使用图片组件,插入图片至卡片中。需注意:
- 仅支持 10M 以内的 JPG/PNG/JPEG/GIF 格式的图片
- 图片的 高度:宽度 不超过 16:9
参数说明
名称 | 是否必填 | 参数类型 | 说明 |
---|---|---|---|
image | 是 | object | 图片组件配置 |
∟ tag | 是 | string | 组件的标签,图片组件tag=img |
∟ content | 是 | object | 图片配置 |
∟ ∟ storage_key | 是 | string | 图片存储的唯一标识 |
∟ ∟ url | 是 | string | 图片url,和storage_key二选一 |
∟ ∟ scale_type | 否 | string | 裁剪方式: - crop_top :顶部裁剪- crop_center :居中裁剪- fit_horizontal :完整展示 |
∟ ∟ size | 否 | string | 图片尺寸(选择“顶部裁剪”、“居中裁剪”时支持): - stretch :超大图(适用于高宽比小于 16:9 的图片)- large :大图(160 × 160,适用于多图混排)- medium :中图(80 × 80,适用于图文混排的封面图)- small :小图(40 × 40,适用于人员头像)- tiny :超小图(16 × 16,适用于图标、备注)- 自定义固定尺寸(如 100px 100px )- 自定义宽高比(如 16:9 ) |
∟ ∟ corner_radius | 否 | string | 图片直角(支持“像素”和“百分比”两种方式):像素(如 10px )、百分比(如 50% ) |
∟ ∟ alt | 否 | object | 悬停提示 |
∟ ∟ ∟ type | 是 | string | 固定为 (plain ) |
∟ ∟ ∟ content | 是 | string | 文本内容 |
∟ ∟ preview | 否 | bool | 查看预览(true :点击图片后,弹出图片查看器放大查看当前点击的图片) |
∟ ∟ transparent | 否 | bool | 透明底色 |
∟ ∟ margin | 否 | string | 外边距(支持自定义上、下、左、右外边距,可修改任意一边或多边,值的取值范围为 [-99,99]px。超出取值范围时,将按最大支持范围展示),例如 20px 20px 20px 20px |
∟ link | 否 | object | 图片的跳转链接 |
∟ ∟ url | 是 | string | 默认的链接地址 |
∟ ∟ pc_url | 否 | string | PC 端的链接地址 |
∟ ∟ ios_url | 否 | string | iOS 端的链接地址 |
∟ ∟ android_url | 否 | string | Android 端的链接地址 |
图片示例
JSON结构
json
{
"image": {
"content": {
"storage_key": "图片存储key",
"url": "外链图片地址,和storage_key二选一",
"scale_type": " crop_top",
"size": "stretch",
"corner_radius": " 20px",
"alt": {
"type": "plain",
"content": "提示内容"
},
"preview": true,
"transparent": true,
"margin": "20px 20px 20px 20px"
},
"link": {
"android_url": "",
"ios_url": "",
"pc_url": "",
"url": "默认链路url"
},
"tag": "img"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25