微信小程序图片加载失败时替换为默认图片的方法


Posted in Javascript onDecember 09, 2019

先看一下效果图:

微信小程序图片加载失败时替换为默认图片的方法

1、第一种情况:单独加载一个图片

index.wxml代码:

<image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image>

index.js代码:

errorFunction: function(){
 this.setData({
  avatar: '/image/default.png'
 }) 
}

2、第二种情况:使用for循环,加载多个图片

index.wxml代码:

<view wx:for="{{imageList}}" wx:for-index="index" wx:for-item="item" wx:key="navItems">
  <image src="{{item.img}}" binderror="errorFunction" data-index='{{index}}' mode="widthFix" />
</view>

index.js代码:

Page({
 /**
 * 页面的初始数据
 */
 data: {
 imageList:[
  {
  id:1,
  name:'白金蜡',
  price:'60元/次',
  img:'/images/service/1.jpg'
  },
  {
  id: 2,
  name: '棕榈蜡',
  price: '90元/次',
  img: '/images/service/2.jpg'
  },
  {
  id: 3,
  name: '去污蜡',
  price: '90元/次',
  img: '/images/service/3.jpg'
  },
  {
  id: 4,
  name: '微镀晶',
  price: '138元/次',
  img: '/images/service/4.jpg'
  },
 ],
 },
 onLoad: function () {
 },
 //图片加载失败时
 errorFunction: function (event) {
 var index = event.currentTarget.dataset.index
 var img = 'imageList[' + index + '].img'
 this.setData({
  [img]: '/images/default.jpg'
 })
 }
})

总结

以上所述是小编给大家介绍的微信小程序图片加载失败时替换为默认图片的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
react-router中的属性详解
Jun 01 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
vue如何使用async、await实现同步请求
Dec 09 #Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 #Javascript
vue新建项目并配置标准路由过程解析
Dec 09 #Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 #Javascript
简述Vue中容易被忽视的知识点
Dec 09 #Javascript
vue路由传参三种基本方式详解
Dec 09 #Javascript
vue使用nprogress实现进度条
Dec 09 #Javascript
You might like
php date与gmdate的获取日期的区别
2010/02/08 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
python实现的登录和操作开心网脚本分享
2014/07/09 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
EJB实例的生命周期
2016/10/28 面试题
人力资源经理的岗位职责范本
2014/02/28 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
人事聘任通知
2015/04/21 职场文书
演讲开场白和结束语
2015/05/29 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
创业计划书之面包店
2019/09/12 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
php png失真的原因及解决办法
2021/10/24 PHP