长期以来浑浑噩噩摸鱼冲浪不亦乐乎，几近躺平。近日来更是频繁上网，鱼摸无可摸深感无聊。想到同学朋友经常敦促：已近中年，需有一技傍身，不可荒废等云。遂翻开尘封已久的课程，乃知时光荏苒一晃两年过去，当时思前想后下定决心买下的课程依然是完璧之身，痛定思痛闲着也是无聊，学吧！
作为前端，我们知道向页面引入图片是需要用到标签<img>而向小程序引入图片需要用到组件<image>，image的知识点如下：
1、常用属性
1. src | string
src是引入的图片资源路径，可以是相对路径也可以是绝对路径。支持 JPG、PNG、SVG、WEBP、GIF 等格式。
<image src="/images/avatar/1.jpg" class=""></image>
2. mode | string
mode是图片裁剪、缩放的模式。
| 合法值 | 说明 |
|---|---|
| scaleToFill (默认值) | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 |
| aspectFill | 模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| top bottom center left right/ top left/top right/bottom left/bottom right | 裁剪模式，不缩放图片，只显示图片的对应方位区域 |
3. lazy-load | boolean
默认值false，图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。
<img src="" lazy-load>
4. show-menu-by-longpress | boolean
长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
<img src="" show-menu-by-longpress>
5. bindload | eventhandle
图片加载成功时触发。
<img src="" binderror="setSuccImg">
setSuccImg(e) {
}
6. binderror | eventhandle
图片加载失败时触发。
<img src="" binderror="setFailImg">
setFailImg(e) {
}
2、小知识点
介绍这个知识点之前，我们先看下图：
从上图可以看出image引入的图片没有铺满整屏反而有些被压缩，因为image 在微信小程序中默认宽度为 300px，高度为240px。当src的值为空时，image仍会占据240px的高度。
image组件默认宽度320px、高度240px。
image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。
image组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分。
3、和cover-image的差异
<image>有一个相似的组件<cover-image>,它俩都是在小程序中引入图片的组件,当我们需要在页面插入图片时就需要用到二者之一，用法如下：
<cover-image src="/images/avatar/1.jpg" class=""></cover-image>
<image src="/images/avatar/1.jpg" class=""></image>
同样都是向页面插入图片，那么它们的区别是什么呢？请看下图：
通过图片我们可以很直观地发现，<cover-image>引入的图片充满了整个屏幕，而<image>并没有（<image>组件默认宽度320px、高度240px）。
还有一个区别，二者在模拟器中通常是看不出的，但是在真机中就会出问题。<cover-image>引入的图片始终悬浮在可视图层的顶层，设置无效。而<image>可以通过设置z-index的值设置显示层级。
以上通过微信官方文档|小程序平台归纳整理。
路漫漫其修远兮，吾将上下而求索~
