image
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | String | 否 | 图片资源地址 | ||
| mode | String | scaleToFill | 否 | 图片裁剪、缩放的模式 | |
| lazy-load | Boolean | false | 否 | 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 | |
| show-menu-by-longpress | Boolean | false | 否 | 开启长按图片显示保存图片菜单 |
|
| binderror | EventHandle | 否 | 当错误发生时触发，event.detail = {errMsg} | ||
| bindload | EventHandle | 否 | 当图片载入完毕时触发，event.detail = {height, width} |
mode 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 | |
| fix | 缩放模式，高度和宽度自动变化，自动撑开 image 元素 | |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 | |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 | |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 | |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 | |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 | |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 | |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 | |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 | |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
示例代码：
<!--pages/component/pages/image/image.mcml-->
<view class="container">
<view class="statement">从底部弹起的滚动选择器。</view>
<view mc:for="{{array}}">
<view class="cssname">
mode:{{item.mode}}【{{item.text}}】
</view>
<image style="width:300rpx; height: 300rpx;background:gray;"
show-menu-by-longpress="{{item.showMenuByLongPress || false}}"
mode="{{item.mode}}" src="{{src}}">123435</image>
</view>
<view class="cssname">base64</view>
<image style="width:200rpx; height: 200rpx;background:gray;" show-menu-by-longpress="{{true}}" mode="scaleToFill" src="{{base64}}" bindload="bindload"/>
<view class="cssname">binderror测试</view>
<image style="width:400rpx; height: 300rpx;background:gray;" mode="scaleToFill" src="https://www.baidu.com" binderror="binderror" />
<view class="cssname">lazy-load: true</view>
<image style="width:400rpx; height: 300rpx;background:gray;" show-menu-by-longpress="{{true}}" mode="scaleToFill" src="{{src1}}" bindload="bindlazyload" lazy-load="{{true}}" />
<view class="cssname">bindload：当图片载入完毕时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindload}}</text>
<view class="cssname">binderror：当错误发生时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{binderror}}</text>
</view>
// pages/component/pages/image/image.js
Page({
data: {
array: [{
showMenuByLongPress: true,
mode: 'scaleToFill',
text: '不保持纵横比缩放图片，使图片完全适应'
}, {
mode: 'aspectFit',
text: '保持纵横比缩放图片，使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: '保持纵横比缩放图片，只保证图片的短边能完全显示出来'
}, {
mode: 'fix',
text: '宽度和高度自动变化，保持原图宽高比不变'
}, {
mode: 'widthFix',
text: '宽度不变，高度自动变化，保持原图宽高比不变'
}, {
mode: 'heightFix',
showMenuByLongPress: true,
text: '高度不变，宽度自动变化，保持原图宽高比不变'
}, {
mode: 'top',
text: '不缩放图片，只显示图片的顶部区域'
}, {
mode: 'bottom',
text: '不缩放图片，只显示图片的底部区域'
}, {
mode: 'center',
text: '不缩放图片，只显示图片的中间区域'
}, {
mode: 'left',
text: '不缩放图片，只显示图片的左边区域'
}, {
mode: 'right',
text: '不缩放图片，只显示图片的右边边区域'
}, {
mode: 'top left',
text: '不缩放图片，只显示图片的左上边区域'
}, {
mode: 'top right',
text: '不缩放图片，只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: '不缩放图片，只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: '不缩放图片，只显示图片的右下边区域'
}],
src: '/assets/images/image.png',
src1: 'http://www.gov.cn/xinwen/2021-06/17/5618792/images/16ce6a1e43b64d30a8f107db30515f08.jpg',
base64: 'data:image/png;base64,.....'
},
bindload: function(e){
this.setData({
bindload: JSON.stringify(e, null, 2)
})
},
binderror: function(e){
this.setData({
binderror: JSON.stringify(e, null, 2)
})
},
bindlazyload: function () {
mc.showToast({
title: '图片懒加载成功',
})
}
})