# 图片

开发者可使用图片组件，插入图片至卡片中。需注意：
- 仅支持 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   | 裁剪方式：<br>- `crop_top`：顶部裁剪<br>- `crop_center`：居中裁剪<br>- `fit_horizontal`：完整展示                                                                                                                                                                                   |
| ∟ ∟ size          | 否        | string   | 图片尺寸（选择“顶部裁剪”、“居中裁剪”时支持）：<br>- `stretch`：超大图（适用于高宽比小于 16:9 的图片）<br>- `large`：大图（160 × 160，适用于多图混排）<br>- `medium`：中图（80 × 80，适用于图文混排的封面图）<br>- `small`：小图（40 × 40，适用于人员头像）<br>- `tiny`：超小图（16 × 16，适用于图标、备注）<br>- 自定义固定尺寸（如 `100px 100px`）<br>- 自定义宽高比（如 `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 端的链接地址                                                                                                                                                                                                                                                  |

## 图片示例

![图片组件](https://cloudcdn.qwps.cn/open/_img/bcd5d6a6e5.png)


## 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"
  }
}
```