为什么js通过ajax前端修改头像不能立刻生效?

项目中有一个上传头像的功能，每次上传成功后，，数据库里的路径已经更新到了，但是刷新后就变成之前的头像，必需重新登录系统，才能显示修改后的头像。现在要改成，修改后就立刻生效。

<div class="photo2"><img class="avatarPic" src="${request.contextPath}$!user.photoImg"></div>

<a href="${request.contextPath}/front/user/profile" class="photo"><img class="userImg" src="${request.contextPath}$!user.photoImg"></a>

var photoImg;
    $("#upload").on("change",function(){
        var formData = new FormData();
        formData.append('file', $('#upload')[0].files[0]);
            $.ajax({
                url:'${request.contextPath}/base/file/upload',
                type:'post',
                processData : false,
                contentType : false,
                data:formData,
                success :function(data){
                      photoImg = data.filePath;
                    $("img[class='avatarPic']").attr('src','${request.contextPath}'+photoImg);
                    //更新用户表头像链接字段
                    updatePic(photoImg);
                }
            });
        });
        function updatePic(photoImg){
        $.ajax({
            url:'${request.contextPath}/front/user/updatePhotoImg',
            type:'post',
            data:{userId:$("#id").val(),photoImg:photoImg},
            success :function(data){
                 layer.alert("操作成功,重新登录后生效");
                 $("img[class='userImg']").attr('src','${request.contextPath}'+photoImg);
            }
        });
    }

后台的代码是这样的：

    @RequestMapping(value="profile")
    public String profile(){
        return "www/user/profile";
    }