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

骑猪看日落 2022-02-23 04:26 270阅读 0赞

### 文章目录 ###

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

### 一. 媒体组件 image 的介绍 ###

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

### 二. 代码示例 ###

wxml中的代码如下

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

其效果如下图所示.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]

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

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

控制台打印如下:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
微信官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/component/image.html][https_developers.weixin.qq.com_miniprogram_dev_component_image.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220223/8a9e23fcc9f74f4ca7e83597c2d5cdbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220223/fd0ad29a0dc74355821ce91206eaeaf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220223/4442d982d6d24e81bc28d2651c165ca3.png
[https_developers.weixin.qq.com_miniprogram_dev_component_image.html]: https://developers.weixin.qq.com/miniprogram/dev/component/image.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019073016091727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5,size_16,color_FFFFFF,t_70