- image组件可以写成单标签也可以写成双标签
- image组件默认大小为320*240
- image组件是一个行内块级元素(inline-block)
image属性用于展示图片, 常用属性如下图:
src 属性
src属性支持本地路径(绝对路径/相对路径)和远程地址
补充: 选择相册中的图片
wxml代码:
<button bindtap="handleGetImage">获取图片</button>
<image src="{{imagePath}}"></image>
js代码:
data: {
imagePath: ''
},
handleGetImage(){
wx.chooseImage({
success: (res)=> {
this.setData({
imagePath: res.tempFilePaths[0]
})
}
})
}
wx.chooseImage方法可以从本地相册选择图片或使用相机拍照。success返回的
response里就是用户选择的图片, 把图片存到data里, 然后image组件读取就可以了
bindload属性和lazy-load 属性
bindload属性在图片加载完成时触发
lazy-load懒加载, 不在视口内的图片不加载, 节省性能提升用户体验
懒加载的范围是视口上下三屏
<image
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
lazy-load bindload="handleLoad"
wx:for="{{10}}"></image>
同时给10张图片添加懒加载属性和监听加载完成事件, 当用户向下滑动时最后几张图片才会开始加载
show-menu-by-longpress 属性
show-menu-by-longpress 属性长按识别图片小程序码
小程序2.7.0版本新加入属性
代码:
<image show-menu-by-longpress
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" ></image>
预览:
mode 属性
mode属性设置图片裁剪、缩放的模式
如果下载了微信开发者工具, 可以在官方文档中此处, 查看官方demo
默认将图片拉伸填充满image组件
mode的合法值
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
top 裁剪模式，不缩放图片，只显示图片的顶部中间区域
bottom 裁剪模式，不缩放图片，只显示图片的底部中间区域
center 裁剪模式，不缩放图片，只显示图片的中间区域
left 裁剪模式，不缩放图片，只显示图片的左边区域
right 裁剪模式，不缩放图片，只显示图片的右边区域
top left 裁剪模式，不缩放图片，只显示图片的左上边区域
top right 裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域
