image

图片。

属性名类型默认值说明最低版本
srcString图片资源地址
modeStringscaleToFill图片剪裁方式，详情见后面的表格
lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的img有效
binderrorEventHandler当错误发生时
bindloadEventHandler当图片加载完时
img组件默认的宽度是300px、高度是225px

mode取值范围：

模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 img 元素
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变
裁剪top不缩放图片，只显示图片的顶部区域
裁剪bottom不缩放图片，只显示图片的底部区域
裁剪center不缩放图片，只显示图片的中间区域
裁剪left不缩放图片，只显示图片的左边区域
裁剪right不缩放图片，只显示图片的右边区域
裁剪top left不缩放图片，只显示图片的左上边区域
裁剪top right不缩放图片，只显示图片的右上边区域
裁剪bottom left不缩放图片，只显示图片的左下边区域
裁剪bottom right不缩放图片，只显示图片的右下边区域

示例

  1. <image style="width:200px; height: 200px;"
  2.     src="../../resources/lena.png" mode="aspectFill" />

原图：

image - 图1

不同mode值表现：

image - 图2

image - 图3

image - 图4

image - 图5

image - 图6

image - 图7

image - 图8

image - 图9

image - 图10

image - 图11

image - 图12

image - 图13

image - 图14

原文: https://developer.toutiao.com/docs/comp/image.html