# Image

* category: UI
* chinese: 图片
* type: UI 组件

---

## 设计思路

基础组件，用于展示图片。

** 注意，在 native 端，图片必须声明宽高， 或通过 flex:1 等方式具备宽高，才能绘制，否则无法展现。**

## API

| 属性配置   | 说明                                                       | 类型                                       | 默认值    |
| :--------- | :--------------------------------------------------------- | :----------------------------------------- | :-------- |
| src        | 新增，与 source api 含义相同                               | string                                     |           |
| style      | 必须写宽高，或通过 flex:1 等能力具备宽高占位，否则无法渲染 | object                                     |           |
| resizeMode | 组件尺寸和图片尺寸不成比例的时候如何调整图片的大小         | 枚举类型，可选 `contain` `cover` `stretch` | `stretch` |
| onLoad     | 图片 onLoad 方法，其中 e.size 可返回图片真实宽高           | function(e)                                |           |

src

* 图片 url

  * 建议使用 https 协议。
  * 建议不要使用相对路径。
  * 开发阶段，您如果需要任意尺寸图片，可以使用 [placeholder 占位符服务](https://placeholder.com/), 如：

```js
<Image
  src="https://via.placeholder.com/350x150"
  style={{ width: 350, height: 150 }}
/>
```

* resizeMode 释义
  * contain : 包含，在区域内图片完全展示，不拉伸，不裁剪
  * cover : 覆盖，覆盖整个区域，可能图片本身会被部分被挡住而不显示，等比缩放，可能会裁剪
  * stretch : 拉伸，拉伸图片以撑满整个区域

<img src="https://img.alicdn.com/tfs/TB1eW.0n22H8KJjy0FcXXaDlFXa-1620-538.png" width="600" />

例：

```js
<View style={{ width: 600, height: 400 }}>
  <Image
    style={{ flex: 1 }}
    src="https://gd2.alicdn.com/imgextra/i2/413996455/TB2tNcJbd0opuFjSZFxXXaDNVXa_!!413996455.jpg"
  />
</View>
```


## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />