JS Hiding Broken Images Within Class

问题

I understand how to hide images if they're as followed,

<img src=""......>

However, I'm having problems as I know nothing about JS on how to hide broken images if they're like this,

<div class="lx-g3-f" >
  <div class="lx-gallery" data-bg="image_url" alt="alt text" referrerpolicy="no-referrer" title="something title">
  <div class="lx-gallery-title" >
    <h3><a href='something_img_url' referrerpolicy="no-referrer">click here!</a></h3>
  </div>
</div>              

How can I make the following work when img doesn't exist.

$("img").on("error", function() {
    $(this).closest('.lx-g3-f').hide();
});

回答1:

Not trivial

Try

$(function() {
  $("[data-bg]").each(function() {
    const $parent = $(this).closest(".lx-g3-f")
    const img = new Image();
    img.onerror=function() {
      $parent.hide();
    }
    img.src=$(this).data("bg")
  })
})

来源：https://stackoverflow.com/questions/64678812/js-hiding-broken-images-within-class