jQuery: Amending the path of image source

Imagine that the image path is not written correctly.  It will show a broken link and you could fix it automatically.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Check image load</title>      
        <script>
            $(function () {
                $('img').on('error', function () {
                    $(this).prop('src', 'http://codecrawl.com/code/images/drawing.png');
                    $('p').html('Image amended and it is loaded successfully now')
                });
            })
        </script>
    </head>
    <body>
        <img src='http://codecrawl.com/code/images/drawing.p'>
        <p>Loading image.....</p>
    </body>
</html>

button

Leave a comment

Leave a Reply