前言
在使用图片问题中可能会遇到各种各样的问题，比如图片加载不出来，图片显示在不同机型效果不同，图片加载展示问题等等。
微信小程序image相关属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图片资源地址 | 1.0.0 | |
| mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
| webp | boolean | false | 否 | 默认不解析 webP 格式，只支持网络资源 | 2.9.0 |
| lazy-load | boolean | false | 否 | 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 | 1.5.0 |
| show-menu-by-longpress | boolean | false | 否 | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 | 2.7.0 |
| binderror | eventhandle | 否 | 当错误发生时触发，event.detail = {errMsg} | 1.0.0 | |
| bindload | eventhandle | 否 | 当图片载入完毕时触发，event.detail = {height, width} | 1.0.0 |
mode明细属性：
| 合法值 | 说明 |
|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
一、图片加载
imsge加载图片本质是使用wx.downloadFile来加载图片的。
加载不出来图片主要有以下几种情况
- 图片格式不规范
- 线上SSL证书有问题
- 文件描述信息不完整
- 服务器发生302跳转
- 网络不好
网络不好情况可以用binderror来处理图片加载，重新给src属性赋值。
服务器发生302跳转：目前小程序已经支持image加载短链接地址图片，但直接使用downloadFile会出现资源不可用
// 直接加载短链接网址，返回403
// 403代表资源不可用
wx.downloadFile({
url: 'http://t.cn/A622upBw',
complete(res){
console.log(res);
}
})
二、适配机型实现全屏背景图
这个问题都是使用css去实现全屏背景图的，代码如下：
<!-- 背景图 -->
<view class="container">
</view>
/* 背景图样式 */
.container {
position: fixed;
width: 100%;
height: 100%;
background-color:azure;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.container::after {
content: "";
background: url(https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg) no-repeat center center;
background-size: cover;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
