nuke-image

Image

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

---

设计思路

在 native 端对 image 标签封装，在 web 端使用 img 完成适配。

** 注意，在 native 端，图片必须声明宽高才能绘制，否则无法展现。**

API

属性配置	说明	类型	默认值
source【即将废弃】	图片 URL，格式 {uri:"xxx"}	object
src	新增，与 source api 含义相同	string
style	必须写宽高，否则无法渲染	object
resizeMode	组件尺寸和图片尺寸不成比例的时候如何调整图片的大小	枚举类型，可选 contain cover stretch	stretch
onLoad	图片 onLoad 方法，其中 e.size 可返回图片真实宽高	function(e)
quality	是否无损，凡是 alicdn 的图片地址，默认开启压缩，如果 quality 设置为 original，则不压缩图片	function(e)

注意，src api ，

• 图片 url

  • 建议使用 https 协议。
  • 建议不要使用相对路径。
  • 开发阶段，您如果需要任意尺寸图片，可以使用 placeholder 占位符服务, 如：

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

• resizeMode 释义

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

例：

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