22. 教你零基础搭建小程序:小程序的常见组件(2)- image
大家好~今天讲小程序的常见组件—— image 图片标签
小程序中的图片标签相当于 web 中的图片标签 ，但也存在着不同之处。
例如：小程序在后期要打包上线时，对图片的大小是有要求的，图片要＜2M
所以，我们在使用图片时，统一使用外网图片，图片标签的默认宽度是320px，高度是240px
image 标签有很多属性，下面我们一一介绍：
（一）准备工作
首先，先准备一张本地图片，并将其上传至网络。
方法：
1、使用 土豆图床 ，将图片上传至此，然后点击下方“上传”按钮，上传至百度。
2、将图片生成的网址复制粘贴至浏览器打开，就可以看到此图片已上传至网络
（二）属性1：src
src属性是用来指定要加载的图片路径。
本地图片的路径为http://graph.baidu.com/resource/1225fa1dbf4a3bd8b6daf01596250568.jpg
使用此属性的操作如下：
1、新建页面demo09
2、打开demo09. wxml 文件，删除其中的内容，写入如下代码：
<image src="http://graph.baidu.com/resource/1225fa1dbf4a3bd8b6daf01596250568.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/12251e299118a598a82b201596252899.jpg
（2）打开demo09. wxml 文件，删除其中的内容，写入如下代码：
<image mode="aspectFit" src="http://graph.baidu.com/resource/12251e299118a598a82b201596252899.jpg"/>保存后，可看到下图，图片的长边完全显示出来了，图片也变成相应的宽高。
再来看mode 的第三个值 aspectFill ，它也是保持纵横比缩放的图片，但只保证图片的短边能完全显示出来。
打开demo09. wxml 文件，写入如下代码：
<image mode="aspectFill" src="http://graph.baidu.com/resource/12251e299118a598a82b201596252899.jpg"/>保存后，页面呈现的图片只是完全显示了短边（高），长边（宽）未全部显示
mode 的第四个值：widthFix ，也是缩放模式的一种，相当于图片的宽度指定后，高度会按比例调整。
我们用代码来演示一下这个缩放模式：
打开demo09. wxml 文件，写入如下代码：
<image mode="widthFix" src="http://graph.baidu.com/resource/12251e299118a598a82b201596252899.jpg"/>保存后，可看到下图中左侧的页面图片的高度变小，由以前的500px 变为现在的 149px
由此看来，widthFix 是将图片的宽度固定不变，将高度按比例进行调整。
mode 属性的前四个有效值是很相似的，大家在学习的时候，建议拿一张图片来进行反复的对比学习，找出其中的差异和相同，这样更便于掌握。
至于mode 其余的有效值的用法，大家直接看下图的说明简述，再配合代码操作，很容易理解掌握，这里就不赘述了~~~
（四）属性3：lazy-load
小程序图片可实现懒加载
代码如下：
<image mode="widthFix" lazy-load src="http://graph.baidu.com/resource/12251e299118a598a82b201596252899.jpg"/>但要注意的是：
lazy-load 自动判断当图片出现在整个页面的上下三屏范围内时，才会自动开始加载图片
整个页面的范围如下：
此属性较为简单，大家课下可以自行适配进行对比。
总结：
1、image 组件的图片原定大小是320×240，若大小不合适，可通过设置mode 有效值来调整图片的大小
2、当图片出现在页面的上下三屏的高度之内时，小程序可自动开始加载图片。
搜索并关注微信公众号：飞寝旺食
获取更多小程序运营干货、免费的开发教程、源代码等！
做小程序我们是认真的！
