22. 教你零基础搭建小程序：小程序的常见组件（2）- image

大家好，欢迎来到IT知识分享网。

大家好~今天讲小程序的常见组件—— image 图片标签

小程序中的图片标签相当于 web 中的图片标签 ，但也存在着不同之处。

例如：小程序在后期要打包上线时，对图片的大小是有要求的，图片要＜2M

所以，我们在使用图片时，统一使用外网图片，图片标签的默认宽度是320px，高度是240px

image 标签有很多属性，下面我们一一介绍：

（一）准备工作

首先，先准备一张本地图片，并将其上传至网络。

方法：

1、使用 土豆图床 ，将图片上传至此，然后点击下方“上传”按钮，上传至百度。

2、将图片生成的网址复制粘贴至浏览器打开，就可以看到此图片已上传至网络

（二）属性1：src

src属性是用来指定要加载的图片路径。

本地图片的路径为http://graph.baidu.com/resource/1225fa1dbf4a3bd8b6daf0.jpg

使用此属性的操作如下：

1、新建页面demo09

2、打开demo09. wxml 文件，删除其中的内容，写入如下代码：

<image src="http://graph.baidu.com/resource/1225fa1dbf4a3bd8b6daf0.jpg"/>

保存后，小程序页面显示此图片

3、点击调试器按钮，调出控制台版块，点击wxml 前的按钮，移至左侧页面的图片，

可看到默认的宽高：320×240

（三）属性2：mode

属性mode : 决定图片内容如何和图片宽高做适配。

操作步骤如下：

1、打开demo09.wxss 文件，给图片增加宽高，代码如下：

image{ box-sizing: border-box; border: 1px solid red ; width: 300px; height: 500px; }

保存后，可以看到图片明显被拉伸，宽高都改变了。

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式，如下图

2、mode属性的默认值是 scaleToFill ，它默认对图片做不保持纵横比的处理，即直接拉伸图片至所要求的宽高。

由上图可知，图片被拉伸后，已经改变了图片的美观，为确保图片能保持合适的宽高比，这里要用到另一种缩放模式：aspectFit

aspectFit 通常用于页面轮播图的设置。

aspectFit 的应用效果我们用代码来一步步展示：

（1）首先，将本地图片进行裁剪变成 宽200× 高100 的图片，如下图：

图片路径为：http://graph.baidu.com/resource/12251ea598a82b9.jpg

（2）打开demo09. wxml 文件，删除其中的内容，写入如下代码：

<image mode="aspectFit" src="http://graph.baidu.com/resource/12251ea598a82b9.jpg"/>

保存后，可看到下图，图片的长边完全显示出来了，图片也变成相应的宽高。

再来看mode 的第三个值 aspectFill ，它也是保持纵横比缩放的图⽚，但只保证图⽚的短边能完全显示出来。

打开demo09. wxml 文件，写入如下代码：

<image mode="aspectFill" src="http://graph.baidu.com/resource/12251ea598a82b9.jpg"/>

保存后，页面呈现的图片只是完全显示了短边（高），长边（宽）未全部显示

mode 的第四个值：widthFix ，也是缩放模式的一种，相当于图片的宽度指定后，高度会按比例调整。

我们用代码来演示一下这个缩放模式：

打开demo09. wxml 文件，写入如下代码：

<image mode="widthFix" src="http://graph.baidu.com/resource/12251ea598a82b9.jpg"/>

保存后，可看到下图中左侧的页面图片的高度变小，由以前的500px 变为现在的 149px

由此看来，widthFix 是将图片的宽度固定不变，将高度按比例进行调整。

mode 属性的前四个有效值是很相似的，大家在学习的时候，建议拿一张图片来进行反复的对比学习，找出其中的差异和相同，这样更便于掌握。

至于mode 其余的有效值的用法，大家直接看下图的说明简述，再配合代码操作，很容易理解掌握，这里就不赘述了~~~

（四）属性3：lazy-load

小程序图片可实现懒加载

代码如下：

<image mode="widthFix" lazy-load src="http://graph.baidu.com/resource/12251ea598a82b9.jpg"/>

但要注意的是：

lazy-load 自动判断当图片出现在整个页面的上下三屏范围内时，才会自动开始加载图片

整个页面的范围如下：

此属性较为简单，大家课下可以自行适配进行对比。

总结：

1、image 组件的图片原定大小是320×240，若大小不合适，可通过设置mode 有效值来调整图片的大小

2、当图片出现在页面的上下三屏的高度之内时，小程序可自动开始加载图片。

搜索并关注微信公众号：飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等！

做小程序我们是认真的！