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

 更新时间:2019年12月09日 11:26:38   作者:七宝琉璃科技  
这篇文章主要介绍了微信小程序图片加载失败时替换为默认图片的方法,本文分情况通过实例代码给大家讲解,需要的朋友可以参考下

先看一下效果图:

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'
 })
 }
})

总结

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

相关文章

  • JS获取URL中的参数数据

    JS获取URL中的参数数据

    这篇文章主要介绍了JS获取URL中的参数数据,有需要的朋友可以参考一下
    2013-12-12
  • js实现右键菜单功能

    js实现右键菜单功能

    这篇文章主要为大家详细介绍了js实现右键菜单功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • bootstrap-Treeview实现级联勾选

    bootstrap-Treeview实现级联勾选

    这篇文章主要为大家详细介绍了bootstrap-Treeview实现级联勾选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JS调用某段SQL语句的方法

    JS调用某段SQL语句的方法

    这篇文章主要为大家详细介绍了通过JS调用某段SQL语句的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript中数据结构与算法(五):经典KMP算法

    JavaScript中数据结构与算法(五):经典KMP算法

    这篇文章主要介绍了JavaScript中数据结构与算法(五):经典KMP算法,本文详解了KMP算法的方方面在,需要的朋友可以参考下
    2015-06-06
  • 封装好的javascript前端分页插件pagination

    封装好的javascript前端分页插件pagination

    本文给大家分享一个非常不错的封装好的javascript前端分页插件pagination,不依赖任何库,有很高的扩展性,有需要的小伙伴可以参考下。
    2016-01-01
  • bootstrap常用组件之头部导航实现代码

    bootstrap常用组件之头部导航实现代码

    这篇文章主要介绍了bootstrap常用组件之头部导航实现代码,然后对个别常用属性进行了解释,需要的的朋友参考下吧
    2017-04-04
  • JS实现隐藏同级元素后只显示JS文件内容的方法

    JS实现隐藏同级元素后只显示JS文件内容的方法

    这篇文章主要介绍了JS实现隐藏同级元素后只显示JS文件内容的方法,可实现将与js文件的同级元素全部隐藏,只显示js文件内容的功能,涉及javascript针对页面元素的遍历与属性修改相关技巧,需要的朋友可以参考下
    2016-09-09
  • js全屏事件fullscreenchange 实现全屏、退出全屏操作

    js全屏事件fullscreenchange 实现全屏、退出全屏操作

    这篇文章主要为大家详细介绍了js全屏事件fullscreenchange,实现全屏、退出全屏操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • mapboxgl区划标签避让不遮盖实现的代码详解

    mapboxgl区划标签避让不遮盖实现的代码详解

    Mapbox是一个可以免费创建并定制个性化地图的网站。这篇文章主要介绍了mapboxgl区划标签避让不遮盖实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07

最新评论