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, such as：

   <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.

例：

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

The Other

• Chat with @翊晨[yichen] in Dingtalk desktop App Download
• DingTalk Group