Mini Program requirements: request api picture if it is 404, then hide it does not show, how to achieve?

doing a sub-class Mini Program, requesting api API data and then parsing and traversing it. Each data is wrapped in a view tag, including text and pictures. However, if some image request is 404404, you want not to display this view directly. I don"t know how to implement it. I tried a lot of methods to fail.

clipboard.png

<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>
Jun.21,2022

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

from: stackoverflow:Kevin Jantzer: ide-image-broken-icon-using-only-css-html-without-js" rel=" nofollow noreferrer "> https://stackoverflow.com/que...

< hr >

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://xiaozhangzaici.com/a.jpg',
    hidden: false
  },


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

UPDATE2: solve the problem of hiding all hidden

//index.js
//
const app = getApp()

Page({
  data: {
    array: [
      { src: 'http://xiaozhangzaici.com/a.jpg'},
      { src: 'https://www.baidu.com/img/bd_logo1.png'}
    ]
  },


  binderrorimg: function (e) {
    console.log(e.currentTarget.dataset.abc);
    var brokenImgIndex = e.currentTarget.dataset.abc;
    
    for (var i = 0; i < this.data.array.length; iPP) {
      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;
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be7a69-31899.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be7a69-31899.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?