Image 图片

组件默认宽度 320px、高度 240px。

Image 图片 - 图1

  1. <se-image src="https://p2.ssl.qhimg.com/t0128c81ef49223e2aa.jpg" />

Props

属性类型默认值必填说明
srcstring否图片资源地址
modestringscaleToFill否图片裁剪、缩放的模式
lazy-loadbooleanfalse否图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

mode 的合法值

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

事件

事件名称描述回调函数参数
error当错误发生时触发event.detail = { errMsg }
load当图片载入完毕时触发event.detail = { height, width }

示例代码

Image 图片 - 图2