分享你我的心得.
共乘一片美好网络.

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

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.indexvar img = 'imageList[' + index + '].img'this.setData({      [img]: '/images/default.jpg'    })  }})

图片基础属性

赞(0)
未经允许不得转载:小叶白龙博客 » 微信小程序图片加载失败时替换为默认图片的方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址