Question

我有一个用于输入用户名的文本框。如果用户名存在，我想获取用户图片。

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

我想用javascript检查用户名图片。

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

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

        });             
    });
</script>

如果图像存在，用户图像将出现在图像框中，但如果不存在，则会出现默认图像。

但我的请求无效。

Answer 1

您可以使用图片onload和onerror事件。

$("#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
    };            
});

用户名获取jquery图像

1 个答案: