上一篇说到了项目中需要的更换头像功能,但是在做这个功能的时候也有遇到一些小问题比如说在更换头像后,显示的头像还是之前的头像,但是已经是提示了更换头像成功,反复查看,并没有出现什么bug,也没有报错,我退出登录重新登录后,头像才换成了提交成功后的头像,然后,我注意到每次后台发给前端的头像地址都是同一个地址,也就是说上传后的头像的地址是不变的,且存于浏览器的缓存中,因为缓存问题,页面上显示的仍然是浏览器缓存里面的图片,也就是更换图片前的头像,此时我们需要用某个标识来标识这个头像,比如时间戳,代码如图1。
在获取到后端给的头像地址时,给该地址添加一个时间戳,并且存入vuex里面。调用这个地址的时候需要在后面添加一个时间戳,如图2。
头像在控制台可以看到是长这个样子的,如图3。
说到这个,有时候会出现这样的状况:当后台图片移动或删除时,后端仍然会传给前端一个头像地址,但是页面只显示一个带X的图片,这会影响用户的体验,为了解决这一个问题,前端设置当后台图片不显示时,显示一张默认图片,代码如图4,图5。
就这样吧~~~~~~~