How do I remove/hide image container on error

Question

I have been looking here for answers and tried a lot of different things that I found on here but unfortunately none of them have worked 100% for me...

I am using a Flickity image carousel. What I want to do is hide the image container if the image doesn't exist.

I have tried the following:

$(".hideOnError").error(function() {
  $(this).parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "fullscreen": true, "draggable": false }'>

<div class="carousel-cell">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B1/B1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B3/B3_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/AB/AB_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F2_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F3_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F4_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F5_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/MB/MB_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>
  </div>

I've also tried it with this:

$("img").error(function() { $(this).parent().remove(); });

I found this here: remove image and its container if image is broken

Both removes the image but the image container is still there and the image slider shows an empty white slide. What I want it to do is remove the image container completely so that just the working image(s) is shown. I'm a total beginner with JS/JQuery and I've been googling and trying things the last week but haven't been able to find something that works. Any help is greatly appreciated!

mplungjan · Answer 1 · 2021-02-15T09:48:45.390

Your code triggers the error handler before the handler is redefined by you.

Also .error() is deprecated and removed since jQuery 3.x

API Note: This API has been removed in jQuery 3.0; please use .on( "error", handler ) instead of .error( handler ) and .trigger( "error" ) instead of .error()

I would do this

const imgUrl = "https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/";
const prodName = "{{row.produktname}}";
const artNum = "{{row.artikelnummer}}"
const html = ["B1/B1", "B3/B3", "AB/AB", "F/F1", "F/F2", "F/F3", "F/F4", "F/F5", "MB/MB"]
  .map(folder => `<div class="carousel-cell hideOnError">
    <img src="${imgUrl}/${folder}"_${artNum}.jpg" alt="${prodName}"
     onerror="$(this).closest('div.hideOnError').remove()">
  </div>`).join("");
$(".main-carousel").html(html);

<div class="carousel-cell"></div>

Alternative:

<div class="carousel-cell">
  <img src="dummy.gif" 
    onload="if (this.src.includes('dummy')) this.src=this.dataset.src"
    onerror="$(this).closest('div.hideOnError').remove()"
    data-src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B1/B1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

Thanks for the quick answer! Unfortunately, this seems to have no effect on the image slider - it still shows all empty slides... — Sonja, Feb 15 '21 at 09:22
Then perhaps there is a typo or the implementation of my script failed - did both fail? Any errors? — mplungjan, Feb 15 '21 at 09:30
I made one mistake see update. You need to add the html to main-carousel — mplungjan, Feb 15 '21 at 09:50
See this version, where I break the 4th entry https://jsfiddle.net/mplungjan/eody7rfp/ you will see F1 is missing — mplungjan, Feb 15 '21 at 09:54

How do I remove/hide image container on error

1 Answers1