1、图⽚标签,image组件默认宽度320px、⾼度240px
2、⽀持懒加载
3、图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件ID。
4、基本属性:
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | 否 | 图片资源地址 | 1.0.0 | |
mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
webp | boolean | false | 否 | 默认不解析 webP 格式,只支持网络资源 | 2.9.0 |
lazy-load | boolean | false | 否 | 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 | 1.5.0 |
show-menu-by-longpress | boolean | false | 否 | 开启长按图片显示识别小程序码菜单 | 2.7.0 |
binderror | eventhandle | 否 | 当错误发生时触发,event.detail = {errMsg} | 1.0.0 | |
bindload | eventhandle | 否 | 当图片载入完毕时触发,event.detail = {height, width} | 1.0.0 |
5、代码如下:
<!-- image 图片标签 1、src 指定要加载的图片的路径 图片存在默认的宽度和高度 320px * 240px 2、mode 决定 图片内容 如何 和 图片标签 宽高 做适配 1)、scaleToFill 默认值 不保持纵横比例缩放图片,使图片的宽高完全拉伸至填满image 元素 2)、aspectFit 默认值 保持宽高比 确保图片的长边显示出来 页面轮播图 常用 3)、aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。 少用 4)、widthFix 以前web的图片的宽度指定了之后高度会自己按比例来调整 常用 5)、bottom 。。。类似以前的background-pository 3、小程序当中的图片 直接就支持 懒加载 lazy-load 1)、lazy-load 会自己判断当图片出现视口上下三屏的高度之内的时候 自己开始加载图片 --> <image src="https://s3.ax1x.com/2020/12/02/D5v2wR.jpg" mode="widthFix" lazy-load="{{true}}"/>
6、mode 有效值:
mode有13种模式,其中4种是缩放模式,9种是裁剪模式。
值 | 说明 | 最低版本 |
---|---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 | |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 | |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 | |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 | |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 | 2.10.3 |
top | 裁剪模式,不缩放图片,只显示图片的顶部区域 | |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 | |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 | |
left | 裁剪模式,不缩放图片,只显示图片的左边区域 | |
right | 裁剪模式,不缩放图片,只显示图片的右边区域 | |
top left | 裁剪模式,不缩放图片,只显示图片的左上边区域 | |
top right | 裁剪模式,不缩放图片,只显示图片的右上边区域 | |
bottom left | 裁剪模式,不缩放图片,只显示图片的左下边区域 | |
bottom right | 裁剪模式,不缩放图片,只显示图片的右下边区域 |
7、示例代码
8、原图
9、JAVASCRIPT代码:
Page({ data: { array: [{ mode: 'scaleToFill', text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应' }, { mode: 'aspectFit', text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来' }, { mode: 'aspectFill', text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来' }, { mode: 'top', text: 'top:不缩放图片,只显示图片的顶部区域' }, { mode: 'bottom', text: 'bottom:不缩放图片,只显示图片的底部区域' }, { mode: 'center', text: 'center:不缩放图片,只显示图片的中间区域' }, { mode: 'left', text: 'left:不缩放图片,只显示图片的左边区域' }, { mode: 'right', text: 'right:不缩放图片,只显示图片的右边边区域' }, { mode: 'top left', text: 'top left:不缩放图片,只显示图片的左上边区域' }, { mode: 'top right', text: 'top right:不缩放图片,只显示图片的右上边区域' }, { mode: 'bottom left', text: 'bottom left:不缩放图片,只显示图片的左下边区域' }, { mode: 'bottom right', text: 'bottom right:不缩放图片,只显示图片的右下边区域' }], src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg' }, imageError: function(e) { console.log('image3发生error事件,携带值为', e.detail.errMsg) } })
10、WXML代码:
<view class="page"> <view class="page__hd"> <text class="page__title">image</text> <text class="page__desc">图片</text> </view> <view class="page__bd"> <view class="section section_gap" wx:for="{{array}}" wx:for-item="item"> <view class="section__title">{{item.text}}</view> <view class="section__ctn"> <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image> </view> </view> </view> </view>
11、效果如下: