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:

Answer 1

If you will add alt with text alt="abc" it will show the show corrupt thumbnail, and alt message abc

If you will not add alt it will show the show corrupt thumbnail

If you want to hide the broken one just add alt="" it will not show corrupt thumbnail and any alt message(without using js)

If you want to hide the broken one just add alt="" & onerror="this.style.display='none'" it will not show corrupt thumbnail and any alt message(with js)

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 & 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/