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

原创于 2019-04-06 16:46:29 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

49 篇文章

订阅专栏

本文介绍了微信小程序中的Image组件，详细解释了如何使用不同属性来控制图片的显示方式，包括缩放和裁剪模式，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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

一. 媒体组件 image 的介绍

image标签为图片。支持JPG、PNG、SVG格式，2.3.0 起支持云文件ID。
其属性如下:

二. 代码示例

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);
  }
})

其效果如下图所示.

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

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

控制台打印如下:

微信官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/image.html