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

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

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

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

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

一个简单的实例代码:


<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>

执行后的效果为:
如果用户没上传头像,则为其设置默认用户头像_第1张图片

原本没有设置图片位置的第一张图片也有了默认的图片

你可能感兴趣的:(JavaScript,HTML,前端集结号)