vue 更换头像2

上一篇说到了项目中需要的更换头像功能,但是在做这个功能的时候也有遇到一些小问题比如说在更换头像后,显示的头像还是之前的头像,但是已经是提示了更换头像成功,反复查看,并没有出现什么bug,也没有报错,我退出登录重新登录后,头像才换成了提交成功后的头像,然后,我注意到每次后台发给前端的头像地址都是同一个地址,也就是说上传后的头像的地址是不变的,且存于浏览器的缓存中,因为缓存问题,页面上显示的仍然是浏览器缓存里面的图片,也就是更换图片前的头像,此时我们需要用某个标识来标识这个头像,比如时间戳,代码如图1。

图1

在获取到后端给的头像地址时,给该地址添加一个时间戳,并且存入vuex里面。调用这个地址的时候需要在后面添加一个时间戳,如图2。

图2

头像在控制台可以看到是长这个样子的,如图3。

图3

说到这个,有时候会出现这样的状况:当后台图片移动或删除时,后端仍然会传给前端一个头像地址,但是页面只显示一个带X的图片,这会影响用户的体验,为了解决这一个问题,前端设置当后台图片不显示时,显示一张默认图片,代码如图4,图5。


图4 html部分
图5 j s部分

就这样吧~~~~~~~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容