微信小程序开发——设置默认图片、错误加载图片

wxml：

<image src='{{imgArr[index]==""?defaultImg:imgList[index]}}'  binderror="errorFunction" data-errorimg="{{index}}" />

说明：　　　　　
imgList: 图片数据源列表，需要在data中定义初始数据，或者从接口动态获取数据；
errorFunction: 图片加载错误绑定的事件，错误图片替换为默认图片主要在这里操作；
data-errorimg： 错误图片索引数据，需要在errorFunction中用以记录错误图片对应的位置；
如果图片地址为空，是不会触发binderror的，所以就直接对图片地址做判断，如果为空，则替换为默认图片。

js：

data: {imgArr:[],    //图片列表，接口动态获取defaultImg: "../../../assets/img/defaultImg.png",    //默认图片
},
......
省略图片数据源获取代码
......
/*** 图片加载错误触发的事件*/
errorFunction(e) {if(e.type=="error"){var errorImgIndex = e.target.dataset.errorimg //获取错误图片循环的下标var imgList= this.data.imgArr                 //将图片列表数据绑定到变量imgList[errorImgIndex] = this.data.defaultImg //错误图片替换为默认图片this.setData({imgArr: imgList})}
}

备注：使用这种方法，是需要将图片数据源放在data中的，这样才可以在 binderror 的事件中进行数据的替换，不可以直接在wxml中调用接口的数据。

转自：逍遥云天微信小程序开发——设置默认图片、错误加载图片

微信小程序开发——设置默认图片、错误加载图片相关推荐

解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
微信小程序开发时遇到403错误解决
前端程序向后台服务器发送请求时,如果服务器不允许跨域请求,则会导致403错误发生(错误信息为:"Invalid CORS request").我们通常的解决办法是将信任的域配置到C ...
【微信小程序】image真机无法加载网络图片
背景由于最近路边的停车位都被无情的创收铲掉了!今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条--没有你的随车电话,我只能点电话举报你了.气的我牙痒痒! 只能回来自己撸一个挪车电话 ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
微信小程序下拉刷新/上拉加载更多（上拉加载更多怎么实现）
参考:微信小程序开发文档->框架>逻辑层->注册页面实现原理: 1.下拉刷新:由于小程序数据是实时渲染的.我们把data{}内的数据清空重新加载即可实现下拉刷新. 2.上拉加载更多 ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...

微信小程序开发——设置默认图片、错误加载图片

微信小程序开发——设置默认图片、错误加载图片相关推荐

最新文章

热门文章