#yyds干货盘点#愚公系列2022年12月 微信小程序-图片加载和全屏适配问题

Posted 2022-12-15

前言

在使用图片问题中可能会遇到各种各样的问题，比如图片加载不出来，图片显示在不同机型效果不同，图片加载展示问题等等。

微信小程序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;