How to Silently Hide "Image Not Found" Icon When Src Source Image Is Not Found

How to silently hide Image not found icon when src source image is not found

You can use the onerror event in JavaScript to act when an image fails to load:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

In jQuery (since you asked):

$("#myImg").error(function () { 
    $(this).hide(); 
});

Or for all images:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

You should use visibility: hidden instead of .hide() if hiding the images might change the layout. Many sites on the web use a default "no image" image instead, pointing the src attribute to that image when the specified image location is unavailable.

Is there a way to hide an Image not found error icon without this.style.display = 'none'

Use CSS

img[src=""] {
  display: none;
}

Like this -

setTimeout(() => document.getElementById('imagebox1').src = "image.jpg", 2000)

img[src=""] {
  display: none;
}

<span> <!-- Players Cards -->
    <img class='imagebox' id='imagebox1' src=''/>
    <img class='imagebox' id='imagebox2' src=''/>
    <img class='imagebox' id='imagebox3' src=''/>
    <img class='imagebox' id='imagebox4' src=''/>
</span>

hide or delete image not found with javascript or jquery

How about removing the a:-

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt="Sample Image" /></a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt="Sample Image" /></a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt="Sample Image" /></a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="Sample Image" /></a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="Sample Image" /></a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="Sample Image" /></a>

Chrome - image not found icon

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

You can use the onerror event in JavaScript to act when an image fails to load:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

In jQuery:

$("#myImg").error(function () { 
    $(this).hide(); 
});

Or for all images:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

Hide parent element if img src = null

Should be a short line like this: $('img[src="null"]').parents('td:first').hide();

If need to target all of the parent td ancestors $('img[src="null"]').parents('td').hide(); remove pseudo :first selector,

How to Silently Hide "Image Not Found" Icon When Src Source Image Is Not Found