小程序需求：请求api的图片如果是404，则隐藏它不显示，如何实现？

Question

在做一个段子类的小程序，请求api接口数据然后解析遍历出来，每一条数据都用一个view标签包着，标签里包括文字和图片，然而由有些图片请求是404，404的话想要直接不显示这个view，不知道要怎么实现，试了很多方法都不行。

<view wx:for="{{pindao.data}}" class='items'>
    <view wx:if="{{item.text !== null}}" class='title'>{{item.text}}</view>
    <view wx:if="{{item.image !== null}}" class=''>
        <image bindtap='previewImage' mode='aspectFill'src="{{item.image}}"></image>
    </view>
    <view wx:if="{{item.gif !== null}}" class=''>
        <image data-isError="{{item.type}}" src="{{item.gif}}"></image>
    </view>
</view>

Answer 1

<img src="Error.src" onerror="this.style.display='none'"/>

来自：stackoverflow：Kevin Jantzer：https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js

---

UPDATE:

<!--index.wxml-->
<view hidden="{{hidden}}"><image class="carlist_img" src="{{img}}" binderror="binderrorimg"></image>abcd</view>
<view>abc</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    img: 'http://foo.com/a.jpg',
    hidden: false
  },


  binderrorimg: function (e) {
    this.setData({
      hidden: true
    })
  }
})

---

UPDATE2:解决一隐藏全部隐藏的问题

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    array: [
      { src: 'http://foo.com/a.jpg'},
      { src: 'https://bar.com/b.jpg'}
    ]
  },


  binderrorimg: function (e) {
    console.log(e.currentTarget.dataset.abc);
    var brokenImgIndex = e.currentTarget.dataset.abc;
    
    for (var i = 0; i < this.data.array.length; i++) {
      if (i == brokenImgIndex) {
        console.log(i);
        this.setData({
          ['array[' + i + '].is_not_show']: true,
        })
      }
    }
  }
})

<view wx:for="{{array}}">
<image class='{{item.is_not_show?"notshow":""}}' src="{{item.src}}" binderror="binderrorimg" data-errorimg="{{index}}" data-abc="{{index}}"></image>
</view>
<view>abc</view>

.notshow {
  display: none;
}