如果用户没上传头像，则为其设置默认用户头像

最新推荐文章于 2024-01-19 20:17:41 发布

原创最新推荐文章于 2024-01-19 20:17:41 发布 · 1.4w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#设置默认用户头像

前端集结号同时被 3 个专栏收录

61 篇文章

订阅专栏

JavaScript

32 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

当用户没有上传头像时，后台返回的用户图像地址可能为空、null或undefined。通过检查地址长度来判断最稳定，长度大于1表示有链接，否则设置为默认图片。提供了一个实例代码实现此功能。

在很多情况下，我们需要读取用户的信息，然后显示出来。最常见的就是关于用户头像的问题。

如果用户在注册或者完善资料的过程中，上传了头像，那么我们前端在展示页面的时候后台会将存储在数据库中的用户头像的地址返回给我们进行展示。

但是如果用户没有设置自己的头像，这时候后台就会给我们传过来空。需要我们做个判断。

但究竟是判断为空、为null、还是为undefined，tity做了很多尝试，发现最为靠谱的还是判断后台返回的用户图像地址的长度，如果长度大于1，则证明有链接，如果没有的话，则将其src设置为默认图片的地址。

一个简单的实例代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>设置默认头像</title>
    <style type="text/css">
        img {
            display: block;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<img src="">
<img src="images/1.jpg">
<script type="text/javascript">
    $(function(){
        $('img').each(function(){
            if($(this).attr('src').length < 1){
                $(this).attr('src','images/2.jpg')
            }
        });
    })
</script>
</body>
</body>