How to hide image broken Icon using only CSS HTML

Question

How can I hide the broken image icon   Example    I have an image with error src      lt img src  Error src   gt    The solution must work in all browsers

User · Answer

Despite what people are saying here  you don t need JavaScript at all  you don t even need CSS    It s actually very doable and simple with HTML only   You can even show a default image if an image doesn t load  Here s how     This also works on all browsers  even as far back as IE8  out of 250 000  visitors to sites I hosted in September 2015  ZERO people used something worse than IE8  meaning this solution works for literally everything    Step 1  Reference the image as an object instead of an img   When objects fail they don t show broken icons  they just do nothing   Starting with IE8  you can use Object and Img tags interchangeably   You can resize and do all the glorious stuff you can with regular images too   Don t be afraid of the object tag  it s just a tag  nothing big and bulky gets loaded and it doesn t slow down anything   You ll just be using the img tag by another name   A speed test shows they are used identically   Step 2   Optional  but awesome  Stick a default image inside that object  If the image you want actually loads in the object  the default image won t show   So for example you could show a list of user avatars  and if someone doesn t have an image on the server yet  it could show the placeholder image    no javascript or CSS required at all  but you get the features of what takes most people JavaScript   Here is the code      lt object data  avatar jpg  type  image jpg  gt       lt img src  default jpg    gt   lt  object gt        Yes  it s that simple   If you want to implement default images with CSS  you can make it even simpler in your HTML like this      lt object class  avatar  data  user21 jpg  type  image jpg  gt  lt  object gt       and just add the CSS from this answer -  https   stackoverflow com a 32928240 3196360

User · Answer

in case you like to keep need the image as a placeholder  you could change the opacity to 0 with an onerror and some CSS to set the image size  This way you will not see the broken link  but the page loads as normal   lt img src  quot  lt your-image-link- gt  quot  onerror  quot this style opacity  0  quot    gt   img       width  75px      height  100px

User · Answer

I think the easiest way is to hide the broken image icon by the text-indent property   img       text-indent  -10000px     Obviously it doesn t work if you want to see the  alt  attribute

User · Answer

Found a great solution at https   bitsofco de styling-broken-images    x000D   x000D  img     x000D    position  relative  x000D    x000D   x000D     style this to fit your needs    x000D     and remove  alt  to apply to all images   x000D  img alt  after     x000D    display  block  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    width  100   x000D    height  100   x000D    background-color   fff  x000D    font-family   Helvetica   x000D    font-weight  300  x000D    line-height  2    x000D    text-align  center  x000D    content  attr alt   x000D    x000D   lt img src  error  gt  x000D   lt br gt  x000D   lt img src  broken  alt  A broken image  gt  x000D   lt br gt  x000D   lt img src  https   images-na ssl-images-amazon com images I 218eLEn0fuL png  alt  A bird  style  width  120px  gt  x000D   x000D   x000D

User · Answer

Using CSS only is tough  but you could use CSS s background-image instead of  lt img gt  tags     Something like this   HTML   lt div id  image  gt  lt  div gt    CSS   image       background-image  url Error src       width    width of image      height    height of image       Here is a working fiddle   Note  I added the border in the CSS on the fiddle just to demonstrate where the image would be

User · Answer

For future googlers  in 2016 there is a browser safe pure CSS way of hiding empty images using the attribute selector   img src  Error src         display  none      Edit  I m back - for future googlers  in 2019 there is a way to style the actual alt text and alt text image in the Shadow Dom  but it only works in developer tools  So you can t use it  Sorry  It would be so nice     alttext-container       opacity  0     alttext-image       opacity  0     alttext       opacity  0

User · Answer

There is no way for CSS HTML to know if the image is broken link  so you are going to have to use JavaScript no matter what  But here is a minimal method for either hiding the image  or replacing the source with a backup     lt img src  Error src  onerror  this style display  none    gt    or   lt img src  Error src  onerror  this src  fallback-img jpg    gt    Update  You can apply this logic to multiple images at once by doing something like this    x000D   x000D  document addEventListener  DOMContentLoaded   function event    x000D     document querySelectorAll  img   forEach function img   x000D     img onerror   function   this style display  none     x000D        x000D      x000D   lt img src  error src  gt  x000D   lt img src  error src  gt  x000D   lt img src  error src  gt  x000D   lt img src  error src  gt  x000D   x000D   x000D    Update 2  For a CSS option see michalzuber s answer below  You can t hide the entire image  but you change how the broken icon looks

User · Answer

The same idea as described by others works in React as follow   lt img src  YOUR-URL  onError   e    gt  e target style display  none     gt

User · Answer

Missing images will either just display nothing  or display a       style box when their source cannot be found  Instead you may want to replace that with a  missing image  graphic that you are sure exists so there is better visual feedback that something is wrong  Or  you might want to hide it entirely  This is possible  because images that a browser can t find fire off an  error  JavaScript event we can watch for         Replace source        img   error function                  this  attr  src    missing png                  Or  hide them       img   error function                 this  hide             Additionally  you may wish to trigger some kind of Ajax action to send an email to a site admin when this occurs

User · Answer

The trick with img  after is a good stuff  but has at least 2 downsides    not supported by all browsers  e g  doesn t work on Edge https   codepen io dsheiko pen VgYErm  you cannot simply hide the image  you cover it - so not that helpful when you what to show a default image in the case   I do not know an universal solution without JavaScript  but for Firefox only there is a nice one   img -moz-broken    opacity  0

User · Answer

I liked the answer by Nick and was playing around with this solution  Found a cleaner method  Since   before   after pseudos don t work on replaced elements like img and object they will only work if the object data  src  is not loaded  It keeps the HTML more clean and will only add the pseudo if the object fails to load    x000D   x000D  object   x000D    position  relative  x000D    float  left  x000D    display  block  x000D    width  200px  x000D    height  200px  x000D    margin-right  20px  x000D    border  1px solid black  x000D    x000D  object  after   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    display  block  x000D    width  100   x000D    height  100   x000D    content      x000D    background  red url  http   placehold it 200x200    x000D    x000D   lt object data  http   lorempixel com 200 200 people 1  type  image png  gt  lt  object gt  x000D   x000D   lt object data  http   broken img url  type  image png  gt  lt  object gt  x000D   x000D   x000D

User · Answer

A basic and very simple way of doing this without any code required would be to just provide an empty alt statement  The browser will then return the image as blank  It would look just like if the image isn t there   Example    lt img class  img gal  alt    src  awesome jpg  gt    Try it out to see

User · Answer

If you need to still have the image container visible due to it being filled in later on and don t want to bother with showing and hiding it you can stick a 1x1 transparent image inside of the src    lt img id  active-image  src  data image gif base64 R0lGODlhAQABAIAAAAAAAP   yH5BAEAAAAALAAAAAABAAEAAAIBRAA7   gt   I used this for this exact purpose  I had an image container that was going to have an image loaded into it via Ajax  Because the image was large and took a bit to load  it required setting a background-image in CSS of a Gif loading bar   However  because the src of the  was empty  the broken image icon still appeared in browsers that use it   Setting the transparent 1x1 Gif fixes this problem simply and effectively with no code additions through CSS or JavaScript

User · Answer

Since 2005  Mozilla browsers such as Firefox have supported the non-standard  -moz-broken CSS pseudo-class that can accomplish exactly this request    x000D   x000D  td   x000D    min-width 64px     for display purposes so you can see the empty cell    x000D    x000D   x000D  img alt  -moz-broken   x000D    display none  x000D    x000D   lt table border  1  gt  lt tr gt  lt td gt  x000D     lt img src  error  gt  x000D   lt  td gt  lt td gt  x000D     lt img src  broken  alt  A broken image  gt  x000D   lt  td gt  lt td gt  x000D     lt img src  https   images-na ssl-images-amazon com images I 218eLEn0fuL png  x000D         alt  A bird  style  width  120px  gt  x000D   lt  td gt  lt  tr gt  lt  table gt  x000D   x000D   x000D    img alt   before also works in Firefox 64  though once upon a time it was img alt   after so this is not reliable   I can t get either of those to work in Chrome 71

User · Answer

If you will add alt with text alt  abc  it will show the show corrupt thumbnail  and alt message abc   lt img src  pic trulli jpg  alt  abc   gt      If you will not add alt it will show the show corrupt thumbnail   lt img src  pic trulli jpg   gt      If you want to hide the broken one just add alt    it will not show corrupt thumbnail and any alt message without using js    lt img src  pic trulli jpg  alt     gt    If you want to hide the broken one just add alt     amp  onerror  this style display  none   it will not show corrupt thumbnail and any alt message with js    lt img src  pic trulli jpg  alt  abc  onerror  this style display  none    gt    4th one is a little dangerous not exactly    if you want to add any image in onerror event  it will not display even if Image exist as style display is like adding  So  use it when you don t require any alternative image to display   display   none      in css   If we give it in CSS  then the item will not display like image  iframe  div like that     If you want to display image  amp  you want to display totally blank space if error  then you can use  but also be careful this will not take any space  So  you need to keep it in a div may be  Link https   jsfiddle net 02d9yshw

User · Answer

You can follow this path as a css solution   x000D   x000D  img   x000D          width 200px  x000D          height 200px  x000D          position relative x000D       x000D  img after   x000D          content      x000D          position  absolute  x000D          top  0  x000D          left  0  x000D          width  inherit  x000D          height  inherit  x000D          background   ebebeb url  http   via placeholder com 300 text PlaceHolder   no-repeat center  x000D          color  transparent  x000D        x000D   lt img src  gdfgd jpg  gt  x000D   x000D   x000D

User · Answer

Use the object tag  Add alternative text between the tags like this    lt object data  img failedToLoad png  type  image png  gt Alternative Text lt  object gt    http   www w3schools com tags tag object asp

[html] How to hide image broken Icon using only CSS/HTML?

Examples related to html

Examples related to css

Examples related to image