小程序中图片加载失败时，自定义加载失败样式

小程序中图片加载失败时，自定义加载失败样式

因为不信任后端同学，万一他给我的图片地址不对呢，或者是他压根就没在服务器上放我需要的图片呢，总之图片没有正常显示的时候，我想要自定义样式，，刚开始是想要加alt属性，在web页面试了可以，但是小程序没有显示出来，然后就发现了binderror事件，好用

<view class="image-container">
  <image 
    src="{{imgUrl}}" 
    alt="图片" 
    binderror="handleImageError"
    wx:if="{{!imageError}}" 
  />
  <view class="error-placeholder" wx:else>
    <text>图片加载失败</text>
  </view>
</view>

// JS 文件
Page({
  data: {
    imgUrl: 'https://pics2.baidu.com/feed/e4dde71190ef76c6b45e3da77b4c62f7ae516712.jpeg@f_auto?token=f3e6a4f5c9c2bf4f6ebfe94876a5a8b7',
    imageError: false
  },
  handleImageError() {
    this.setData({ imageError: true });
  }
});