# Image

- category: UI
- chinese: 图片
- type: UI Component

---

## Design

The `image` tag is packaged on the native side, and the `img` is used to complete the adaptation on the web side.

**Watching! At the native end, the picture must be declared high and wide to draw, otherwise it cannot be displayed.**



## API

| Props             | Description                                                                                                                              | Type                                                   | Default   |
| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------- | :-------- |
| source(scrapping) | IMG URL, format {uri:"xxx"}                                                                                                              | object                                                 |           |
| src               | New, same meaning as source API                                                                                                          | string                                                 |           |
| style             | width, height required, or can't render                                                                                                  | object                                                 |           |
| resizeMode        | How to adjust the size of a picture when the component size is out of proportion to the picture size                                     | Enumerated types, options: `contain` `cover` `stretch` | `stretch` |
| onLoad            | Picture onLoad method, where `e.size` can return the true width of the picture                                                           | function(e)                                            |           |
| quality           | Whether lossless, the alicdn picture address, the default open compression, if quality is set to original, does not compress the picture | function(e)                                            |           |


**Watching!src api**

- IMG url
    - It is recommended to use the HTTPS protocol.
    - It is recommended not to use the relative path.
    - In the development phase, if you need any size pictures, you can use this: [placeholder service](https://placeholder.com/), such as：

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


- resizeMode Definition
    - contain : Contains: in the region, the picture is fully displayed, not stretched, not trimmed.
    - cover : Covering: covering the entire area, the picture itself may be partially blocked and not displayed, geometric scaling, may be trimmed.
    - stretch : Stretch: stretch the picture to cover the whole area.
    



例：
````js

    <Image source={{uri:"https://gd2.alicdn.com/imgextra/i2/413996455/TB2tNcJbd0opuFjSZFxXXaDNVXa_!!413996455.jpg"}} quality ="original"/>
````

## The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

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