I am not able to load the image that demonstrates error using jQuery

2

Today's exercise was to load one image when there is an error in the other image. Firstly I tried to use the .erro() function, but I discovered that it was deprecated in version 3.0. Then I tested the .on() function, but in the same way did not load the image. Can someone help me? Ps: I'm a beginner in Jquery.

The code I made:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Evento navegador</title>
    <script type="text/javascript" src="jquery/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">

        $(function(){
            $('img').on('error', function(){
                $('img').attr('src', 'img/erro.jpg');
            });
        });

    </script>
    <img src="img/img_nao_existe.jpg" alt="">

</body>
</html>

Note: I'm using the latest version of Chrome and version 3.2.1 of jQuery.

    
asked by anonymous 30.10.2017 / 22:04

1 answer

1

Include the image path in the same statement to capture the error event

$('img').on('error', function(){
   $(this).attr('src', 'img/erro.jpg');
}).attr('src','img/img_nao_existe.jpg');
    
04.04.2018 / 15:02