19. 媒体组件
于2023-08-16 16:38:41发布
26
image
图片
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | 图片资源地址 | |
mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 |
binderror | HandleEvent | 当错误发生时,发布到AppService的事件名,事件对象event.detail = { errMsg: 'something wrong' } | |
bindload | HandleEvent | 当图片载入完毕时,发布到AppService的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px' } |
注:image组件默认宽度320px、高度240px
mode 有效值:
mode有13种模式,其中4种是缩放模式,9种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
缩放 | aspectFill | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
缩放 | widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
裁剪 | top | 不缩放图片,只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片,只显示图片的底部区域 |
裁剪 | center | 不缩放图片,只显示图片的中间区域 |
裁剪 | left | 不缩放图片,只显示图片的左边区域 |
裁剪 | right | 不缩放图片,只显示图片的右边区域 |
裁剪 | top left | 不缩放图片,只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片,只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片,只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片,只显示图片的右下边区域 |
下面对13中模式中的5种模式做比较详细的比较
原图
scaleToFill
不保持纵横比缩放图片,使图片完全适应。缺点是图片会被拉伸
aspectFit
保持纵横比缩放图片,使图片的长边能完全显示出来。缺点是上下或者左右会有白边
aspectFill
保持纵横比缩放图片,只保证图片的短边能完全显示出来。缺点是图片显示不完整
widthFix
宽度不变,高度自动变化。这是比较不错的选择
top
不缩放图片,只显示图片的顶部区域
例子 :
<image src="https://www.baidu.com/pic.jpg" mode="center"></image>
viedo
视频
例子
<video style="width: 100%;" src="http://111.230.246.226/video/1.mp4"/>
更多详细的文档请参考: https://www.w3cschool.cn/weixinapp/weixinapp-ofp938dg.html