1.前端页面

CSS: 如何让img里的图片自适应div，且不变形_img自适应div大小 铺满且不变形-CSDN博客

JavaScript/jQuery 如何改变一个img元素的src属性|极客教程 (geek-docs.com)

2.要求 

左上角显示用户的昵称和头像.

3.后端代码

3.1 添加拦截器

3.2 注册拦截器

3.3 Controller 

@RequestMapping("/getUserInfo")public Result getUserInfo(HttpSession httpSession){//获取会话//其实拦截器就进行了该操作if(httpSession==null){return Result.fail(Constant.RESULT_CODE_UNLOGIN,"没有登录用户账户");}User user=(User) httpSession.getAttribute(Constant.USERINFO_SESSION_KEY);if(user==null){return Result.fail(Constant.RESULT_CODE_MESSAGENULL,"获取不到用户信息");}return Result.success(user);}

3.3.1 postman测试

成功！！！

4.前端代码

<!-- 当前登录用户的用户名 --><div class="user"><div class="pic"><!-- <img id="pic" src="file:///F:/pic/个人头像.png" alt=""> --><img id="pic" src="pic/个人头像.png" alt=""></div><div class="name">lisi</div></div>

/
// 从服务器获取到用户登录数据
/function getUserInfo() {$.ajax({type: 'get',url: 'user/getUserInfo',success: function(result) {// 从服务器获取到数据. // 校验结果是否有效. let body=result.data;if (body.userId && body.userId > 0) {// 如果结果有效, 则把用户名显示到界面上. // 同时也可以记录 userId 到 html 标签的属性中. (以备后用)let userDiv = document.querySelector('.main .left .user .name');let userDivPic = document.querySelector('.main .left .user .pic #pic');userDiv.innerHTML = body.username;$("#pic").attr("src","pic/"+body.picname)//不好用// userDivPic.src="pic/"+body.picname;userDiv.setAttribute("user-id", body.userId);}},error: function(error){if(error!=null&&error.status==401){alert("请登录用户");location.href = "login.html";}}});
}getUserInfo();