微信小程序-image组件

• image组件可以写成单标签也可以写成双标签
• image组件默认大小为320*240
• image组件是一个行内块级元素(inline-block)
  image属性用于展示图片, 常用属性如下图:

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>

预览:

image

mode 属性

mode属性设置图片裁剪、缩放的模式
如果下载了微信开发者工具, 可以在官方文档中此处, 查看官方demo

image
默认将图片拉伸填充满image组件

mode的合法值

• scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

• aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

• aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

• widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

• top 裁剪模式，不缩放图片，只显示图片的顶部中间区域

• bottom 裁剪模式，不缩放图片，只显示图片的底部中间区域

• center 裁剪模式，不缩放图片，只显示图片的中间区域

• left 裁剪模式，不缩放图片，只显示图片的左边区域

• right 裁剪模式，不缩放图片，只显示图片的右边区域

• top left 裁剪模式，不缩放图片，只显示图片的左上边区域

• top right 裁剪模式，不缩放图片，只显示图片的右上边区域

• bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域

• bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域