微信小程序 图片加载失败展示默认图片、binderror

图片加载失败，不会有提示，只是空白的一块，用户体验很不好。所以要弄一个默认的提示图片来展示

本打算在src里面写两个变量名，中间写个 ||，但是尝试了之后是行不通的，即便第一个加载失败了，也不会展示第二个

<!--错误展示-->
<img src="{
    
    {image1||image2}}" alt="">

后来总结了两个方法

• 在image外面再嵌套一层，给外层设置背景图片，如果image加载失败了就能直接展示外层的背景图了

<view class="image_wrapper" style="background-image: url({
    
    {picLoadFail}});background-size:100% 100%;">
  <image src="{
    
    {imageUrl}}"></image>
</view>

tips：如果你打算把他放在css文件里面，url是需要转码的

但是这个方法有一个弊端，不建议使用。当我们用到的图片是一整张图还好，要是遇到了局部透明的就很麻烦，毕竟这个背景图是一直存在的，有透明的地方就会露出来背景图，到时候尴尬。

所以我就用了第二种方法，用image的监听发生错误的方法

• 当错误发生时，我们就把这图片的url改成默认图片的url，不管要加载的图片是不是整张图，都无所谓。

.wxml

<img src="{
    
    {imgUrl}}" data-name='imgUrl' binderror='setFailImg' alt="">

.js

setFailImg(e){
    
    
    let {
    
    name}=e.currentTarget.dataset;
    let {
    
    picLoad}=this.data
    this.setData({
    
    
        [name]:picLoad
    })
},

这样就可以啦