How to hide “Image not found” icon when source image is not found?

JavaScript and jQuery can be used to hide the “Image Not Found”icon when the image is not found. The basic idea is to set the display property of the image object to ‘hidden’ when an error arises. Let us consider the below HTML code which displays the GeeksforGeeks logo for demonstration purpose.

Example: In this example, we will not hide the icon of image not found.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h2>
            Example to hide the 'Image Not Found' icon i.e.
            <img src="error.png" width="20px" />
        </h2>
        <img id="HideImg" src="geeksforgeeks-6.png" />
    </body>
</html>

chevron_right


Output:

  • When image is available:
  • When the image is not found:

Methods to hide the image error icon:

  • Using onerror() event: The onerror event is automatically called when the corresponding item raises an error. When the image is not found, the onerror event while call the hideImg() function which will set the visibility of the image to hidden.
    Program:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            <h2>
                Example to hide the 'Image Not Found' icon i.e.
                <img src="error.png" width="20px" />
            </h2>
            <img id="HideImg" src="geeksforgeeks-6.png" 
                 onerror="hideImg()"/>
            <script>
          function hideImg() {
            document.getElementById("HideImg")
                              .style.display = "none";
           }
            </script>
        </body>
    </html>

    chevron_right

    
    

  • Using short-hand notation: You can apply this short-hand notation for HTML events. This will set the visibility of the reference object to hidden.
    Poogram:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
        </head>
        <body>
            <h2>
                Example to hide the 'Image Not Found' icon i.e.
                <img src="error.png" width="20px" />
            </h2>
            <img id="HideImg" src="geeksforgeeks-6.png" 
                 onerror='this.style.display = "none"' />
        </body>
    </html>    

    chevron_right

    
    

  • Using jQuery: Using the JQuery error handler function error(), we can catch the error and hide the object using hide() function.
    Note: The error() function has been removed from jquery verion 3.0. and later.
    Program:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <script src=
           </script>
        </head>
        <body>
            <h2>
                Example to hide the 'Image Not Found' icon i.e.
                <img src="error.png" width="20px" />
            </h2>
            <img id="HideImg" src="geeksforgeeks-6.png" />
        </body>
    </html>
    <script>
        $(document).ready(function () {
            $("#HideImg").error(function () {
                $(this).hide();
            });
        });
    </script>

    chevron_right

    
    

Output: All the above codes give the same output.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.