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


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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
使用javascript插入样式
Mar 14 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
PHP7新特性简述
2017/06/11 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
Python实现LRU算法的2种方法
2015/06/24 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
中专毕业生自荐信
2013/11/16 职场文书
学校安全教育制度
2014/01/31 职场文书
入学申请自荐信范文
2014/02/26 职场文书
联欢晚会主持词
2014/03/25 职场文书
国际贸易实训总结
2015/08/03 职场文书
公司仓库管理制度
2015/08/04 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
Python实现科学占卜 让视频自动打码
2022/04/09 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android