【愚公系列】2022年09月 微信小程序-图片加载和全屏适配问题

举报
愚公搬代码 发表于 2022/09/30 22:24:14 2022/09/30
【摘要】 前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等。微信小程序image相关属性如下:属性类型默认值必填说明最低版本srcstring否图片资源地址1.0.0modestringscaleToFill否图片裁剪、缩放的模式1.0.0webpbooleanfalse否默认不解析 webP 格式,只支持网络资源2.9.0lazy-...

前言

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

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

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。