媒体组件的使用

媒体组件image的使用目录image属性2任务实现image简介任务描述任务描述3实现下图效果：1、图片完全适应，2、图片左下对齐显示。image简介4image组件实现图片的布局显示。image属性5属性名类型默认值说明srcString图片资源地址，支持云文件IDmodeString'scaleToFill'图片裁剪、缩放的模式6属性名类型默认值说明binderrorHandleEvent当错误发生时，发布到AppService的事件名，事件对象event.detail={errMsg:'somethingwrong'}bindloadHandleEvent'scaleToFill'当图片载入完毕时，发布到AppService的事件名，事件对象event.detail={height:'图片高度px',width:'图片宽度px'}image属性mode有效值13种，4种是缩放模式，9种是裁剪模式。7模式值说明缩放scaleToFill使图片的宽高完全拉伸至填满image元素缩放aspectFit保持纵横比缩放图片，长边完全显示。缩放aspectFill保持纵横比缩放图片，短边完全显示。缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变image属性8模式值说明裁剪top不缩放图片，只显示图片的顶部区域裁剪bottom不缩放图片，只显示图片的底部区域裁剪center不缩放图片，只显示图片的中间区域image属性mode有效值-裁剪9模式值说明裁剪left不缩放图片，只显示图片的左边区域裁剪right不缩放图片，只显示图片的右边区域裁剪topleft不缩放图片，只显示图片的左上边区域裁剪topright不缩放图片，只显示图片的右上边区域image属性mode有效值-裁剪10模式值说明裁剪bottomleft不缩放图片，只显示图片的左下边区域裁剪bottomright不缩放图片，只显示图片的右下边区域image属性mode有效值-裁剪//index.wxml页面<viewclass="page__hd"><textclass="page__title">image</text><textclass="page__desc">图片</text></view><viewclass="page__bd"><viewclass="sectionsection_gap"wx:for="{{array}}"wx:for-item="item">任务实现11<viewclass="section__title">{{item.text}}</view><viewclass="section__ctn"><imagestyle="width:200px;height:200px;background-color:#eeeeee;"mode="{{item.mode}}"src="{{src}}"></image></view></view></view>12任务实现//index.jsPage({data:{array:[{mode:'scaleToFill',text:'scaleToFill：不保持纵横比缩放图片，使图片完全适应'},13任务实现//index.js{mode:'bottomleft',text:'bottomleft：不缩放图片，只显示图片的左下边区域'},14任务实现//index.jssrc:'../resources/cat.jpg'},imageError:function(e){