微信小程序image图无法加载出来的解决办法(亲测有效)
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片呈现灰色,这个时候该如何解决这个问题呢?请带着问题查看我的博客,希望这篇博客对您有所帮助(skr)看官方文档?自行解决?写在前面(初衷)鉴于现在网上的博客80%的博客不仅内容相同有的时候连错的地方都是一模一样,连一个标点符号都不带改的这种现状,本人在工作与学习中经常遇到此种情况,带来诸多不便所有特此整理此篇文章,也为了帮助以后的开发者节
·
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr)
- 看官方文档?
- 自行解决?
写在前面(初衷)
鉴于现在网上的博客80%的博客不仅内容相同有的时候连错的地方都是一模一样,连一个标点符号都不带改的这种现状,本人在工作与学习中经常遇到此种情况,带来诸多不便所以特此整理这篇文章,也为了帮助其他开发者节约更多的时间和精力。
1.看官方文档
看小程序官方文档?官方文档写的大致意思是,图片尺寸不合符/图片不规范,我们会尽力优化的(都一年多,问题还在优化–手动滑稽)还得自己想办法解决!
2.自行解决
网上搜搜微信小程序image图片异常加载是否有捕捉函数?结果一搜还真有;图片异常加载函数binderror可以捕获到。
1.列表中图片异常
<swiper class="section icons" indicator-dots="false" autoplay="false" interval="" duration="500">
<swiper-item wx:for="{{icons}}" wx:for-item="list" wx:key="icons">
<view class="icon" wx:for="{{list}}" wx:for-item="icon" wx:key="id" >
<navigator url="{{icon.url}}" hover-class="changestyle">
<image data-index='{{index}}' src="{{icon.img}}" binderror="imageOnloadError" mode="scaleToFill" class="cu-avatar round lg" />
</navigator>
<text>{{icon.name}}</text>
</view>
</swiper-item>
</swiper>
imageOnloadError(e) {
console.log("图片加载出错啦")
var that = this;
var index = e.currentTarget.dataset.index;//获取加载出错的图片下标
var _imgUrlList = this.data.imglist;//后台返回的图片路径数组
var img = '../../images/yichang.png';//图片加载失败时展示的默认图
_imgUrlList[0][index].img = img;
console.log(_imgUrlList)
that.setData({
icons: _imgUrlList
})
},
2.单个图片异常
<image src="{{imgurl}}" binderror="imageOnloadError" mode="scaleToFill" class="cu-avatar round lg" ></image>
imageOnloadError(e){
console.log(e)
var img='../../images/yichang.png'//图片加载失败时展示的默认图
this.setData({
imgurl:img
})
}
写在最后
如果您觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏,毕竟原创不易;如果您觉得文章有什么地方写得不对或者需要改进的地方,欢迎通过评论私聊博主!
更多推荐
已为社区贡献1条内容
所有评论(0)