微信小程序-image组件

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-22

36.微信小程序-image组件2023-04-24

37.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

image 组件

图片组件。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

废话不多说直接上代码。

属性

我们先单独的使用下组件让我们的图片显示在页面当中先：

index.wxml:

<image src="../../assets/images/01.png"/>

可以看到图片显示了，但是呢，比例不对劲。这里就要介绍到 image 组件的注意点了。

!> 注意点：在微信小程序当中 image 组件是有默认宽高的 320 * 240

mode

在 image 中比较常用的模式有两个：

• widthFix：让图片的宽度和image的宽度一样，高度等比拉伸自适应。
• heightFix：让图片的高度和image的高度一样，宽度等比拉伸自适应

?> mode="widthFix"

<image mode="widthFix" 
       src="../../assets/images/01.png"
/>

?> mode="heightFix"

<image mode="heightFix" 
       src="../../assets/images/01.png"
/>

假如我们这个时候需要开发一个banner的效果，我们就可以利用mode="widthFix"来进行实现，我这里简单的来进行写一个示例供参考：

index.wxml:

<image mode="widthFix" 
       src="../../assets/images/01.png"
       class="banner"
/>

index.wxss:

.banner{
  width: 100%;
}

最终效果：

bindload

当图片载入完毕时触发，event.detail = {height, width}

首先我们将如下的 WXML 代码在文件当中复制 10 个：

index.wxml:

<image mode="widthFix" 
       src="../../assets/images/01.png"
       class="banner"
       bindload="onImageLoad"
/>

然后编写 JS 业务逻辑代码：

index.js:

Page({
  onImageLoad(){
    console.log("图片加载完毕");
  }
})

运行这个程序，看控制台的打印：

⑨图片加载完毕

如上的示例证明了一点，就是说我们有多少张图片，它就会加载多少次，这样就会存在一些问题，也就是我所要介绍的注意点。

!> 注意点：默认情况下只要界面被显示，那么界面上所有的图片都会被加载，无论这张图片是否在可视范围内，这样就会导致性能问题，如果界面上的图片比较多的话，我们可以使用lazy-load来优化性能。

lazy-load

官方解释：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
本文解释：即将显示图片的时候才会去加载图片，而不是一上来就进行加载导致性能问题

使用下 lazy-laod：

改造下之前的案例将如下的代码在 index.wxml 拷贝 20 份：

<image mode="widthFix" 
       src="../../assets/images/01.png"
       class="banner"
/>

然后，在第 20 个 image 组件当中绑定 lazy-load：

<image mode="widthFix" 
       src="../../assets/images/01.png"
       class="banner"
       bindload="onImageLoad"
       lazy-load
/>