六.微信小程序媒体组件image

微信小程序媒体组件 image

图片标签, image组件默认宽度320px, 高度240px.

注意: 该标签其实是web中的图片标签 和 背景标签的结合. 并且不支持以前的web中的背景图片的写法

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
binderror	HandleEvent		当错误发生时, 发布到AppService的事件名, 事件对象event.detail = {errMsg:‘something wrong’}
bindload	HandleEvent		当图片载入完成时, 发布到AppService的事件名, 事件对象event.detail = {height:‘图片高度pa’, width:‘图片宽度px’}

mode 有效值

mode有13种模式, 其中4中是缩放模式, 9中是裁剪模式.

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