微信小程序图片加载失败时替换为默认图片的方法
2019-12-10 07:10
2221 查看
先看一下效果图:
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' }) } })
总结
以上所述是小编给大家介绍的微信小程序图片加载失败时替换为默认图片的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- vue图片加载失败时用默认图片替换的方法
- jQuery图片加载失败替换默认图片方法汇总
- 微信小程序挖坑一:云开发上传多图片路径问题以及莫名加载失败
- 微信小程序加载本地图片方法
- img 加载网络图片失败 显示默认图片的方法
- 微信小程序图片加载失败渲染层网络层错误
- 网页图片加载失败,用默认图片替换
- JavaScript判断图片是否能够加载,失败则替换默认图片
- JavaScript判断图片是否能够加载,失败则替换默认图片
- 如果图片不存在或加载失败 则替换为默认图片
- HTML img图片加载失败时用默认图片替换
- html img加载失败,怎样替换为默认图片
- 关于web开发中,图片加载失败替换为默认图片
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
- 关于微信小程序下拉刷新组件加载图片(三个小点)不显示的问题
- Win8系统中设置图片默认打开程序的方法
- JS图片加载失败用默认图片代替
- ionic开发——加载在线图片完整功能实现方法(正在加载-加载成功-加载失败)
- 使用jquery给img绑定error事件的问题(页面图片如果加载失败则用默认图片显示)
- img src加载失败给默认图片(默认图片加载失败不冒泡)