微信小程序day03_11之媒体组件之image

文章目录

一. 媒体组件 image 的介绍
二. 代码示例

一. 媒体组件 image 的介绍

image标签为图片。支持JPG、PNG、SVG格式，2.3.0 起支持云文件ID。
其属性如下:
微信小程序day03_11之媒体组件之image

二. 代码示例

wxml中的代码如下

<block wx:for="{{array}}">

<image src='{{src}}' mode='{{item.mode}}' style='width:600rpx;height:600rpx;' lazy-load='{{true}}' bindload='load'>

</image>
</block>

js中的代码如下

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://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=19040421"
  } ,
  load: function(e){
    console.log(e.detail);
  }
})

其效果如下图所示.
微信小程序day03_11之媒体组件之image

其中 mode 用于图片裁剪、缩放的模式.
lazy-load 用于设置是否懒加载. 在即将进入一定范围（上下三屏）时才开始加载
bindload 为图片加载完成时, 触发的函数.
在js 中绑定的函数为load . 用console.log打印图片加载完成后的事件.

  load: function(e){
    console.log(e.detail);
  }

控制台打印如下:
微信小程序day03_11之媒体组件之image
官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/image.html