Multiple image hidding if one image is available

Question

I have a page where needs to be displayed only one image, but the image can be from different sources.

I've put all the possible sources and onerror, if the image is not from that source it is hidden. The problem is that sometimes the same image can be found in 2 or even 3 srcs so the onerror function is not runned and on the page the same image is displayed 2 or 3 times (the same image but different source)

What i need is a js script that hides the rest of the images if one of them is working, but there are a lot of possibilites like: img_01 to be shown with img_4 or img_2 with img_3 or img_01 with img_2 and img_3. I don't know how to cover all this possibilites so that is why i need your help.

I hope u understood my problem

Thanks! :)

<div class="col-md-12" style="padding: 0px; margin-bottom: 20px;">
                                    <img id="img_01" src="im/wall/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>

                                    <img id="img_2" src="im/ceiling/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>

                                    <img id="img_3" src="im/floor/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>
                                    <img id="img_4" src="im/collections/<?php                
                                                if(isset($_GET['i']) && strlen($_GET['i']) > 0){
                                                echo $_GET['i'];
                                                }?>.jpg"  
                                                onerror="this.style.display='none'"/>                           
                            </div>      

i've used something like this and i even tried to put it in an if for all the images

$('#img_01').on('load', function(){
// hide/remove the loading image
$('#img_2, #img_3, #img_4').hide();

Answer 1

const my_imgs = document.getElementsByClassName('my_img');

const handler = function(e){
  remove_handler();
  e.target.classList.remove('hidden');
}

const remove_handler = function(){
  for(let i=my_imgs.length; i--; ) {
    my_imgs[i].removeEventListener('load', handler);
  }
}

for(let i=my_imgs.length; i--;){
  my_imgs[i].addEventListener('load', handler);
}

.my_img {
  width:200px;
}
.hidden {
  display:none;
}

<div class="container">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/TWTNM0XMX9.jpg">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/L6QLZEGPXB.jpg">
  <img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/FH3TLO40EI.jpg">
</div>