How to Hide Image Broken Icon Using Only Css/Html

How to hide image broken icon without hiding all the style?

You could try injecting a transparent base64-image on error.

onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='"

Edit after a question from OP:

Base64 is an image format that allows you to "write" an image directly into your HTML file instead of including an external image.

let's look at the image src:

First:

<img src="data:image/png;base64...

This will tell the browser how to display the code that follows. It says that the MIME-Type (in this case, File Type) of the src is .png and that the encoding is base64, which is basically just image data in a String.

After that, the actual Data follows:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

These are just letters representing image data like pixels, colors, alpha and so on.
If you want to know how exactly it works, read https://www.rfc-editor.org/rfc/rfc3548 or click through the links under Further Reading.

Further Reading

• Embedding Base64 Images (on Stackoverflow)

• How to display Base64 images in HTML (on Stackoverflow)

• Base64 image converter

• Base64 on Wikipedia

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.

How to stop broken images showing

Simply don't put those img elements there. They have no semantic value. Also, you should read this article: Empty image src can destroy your site on NCZOnline

I guess you're changing the image source with Javascript anyways. You should simply add an img in the cell if there is not one yet (see the example in the MDC appendChild() page).

(Another, uglier solution is to hide the images by default (style="display: none;"), and only display them with Javascript if they get an src. But you should do the first one.)

How do i remove broken image box?

use alt here for fallback

demo

html

<img src="abc" alt="image" />

css

img {
    width:200px;
    height:200px;
}

Alternatively, if you dont want to show any alt text, just give a blank space.

demo here

HTML

<img src="abc" alt=" " />

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>