CODEWITHSUNDEEP
javascriptjquery
barteloma
barteloma

Reputation: 6855

get image with jquery by username

I have a textbox for entering username. I want to get user image if username exist.

<form accept-charset="UTF-8" role="form">
   <img id="avatar" src="default.jpg" alt="">
   <input id="username" name="username" type="text">
</form>

I want to check username image with javascript.

<script type="text/javascript">
    $("#username").keyup(function (event) {
        var url = location.pathname 
                  +"/Images/avatars/" 
                  + event.target.value + ".jpg";

        $.get(url, {}, function (response) {

        });             
    });
</script>

If image exist, user image will appear in image box, but if not exist default image will appear.

But my get request did not work.

Upvotes: 0

Views: 208

Answers (1)

Satpal
Satpal

Reputation: 133403

You can use Image onload and onerror event. 

$("#username").keyup(function (event) {
    var url = location.pathname 
              +"/Images/avatars/" 
              + event.target.value + ".jpg";
    var img = new Image();
    img.src = url;
    img.onload = function () { 
        $('#avatar').prop('src', url); //When load's sucessfully
    };
    img.onerror = function () { 
        $('#avatar').prop('src', 'default.jpg'); //When load's fails
    };            
});

Upvotes: 3

Related Questions