vue webapp 加载网络头像过慢优化

网络过慢的话，就加载很慢，所以可以先请求一次图片，然后保存在本地，跳转页面后直接从cookie中取值，这样就不会慢了

1. import Cookies from 'js-cookie';

2. 用户登录后获取头像文件地址

      downX(urlp) {

        // var _this = this;

Cookies.set('photoUrl', JSON.stringify(urlp));

        var x = new XMLHttpRequest();

        x.open('GET',urlp , true);

        x.responseType = 'blob';

        x.onload = function (e) {

          var url = window.URL.createObjectURL(x.response);

          console.log('下载图片');

          console.log(url);

          Cookies.set('imageUrl', JSON.stringify(url));

        };

        x.send();

      },

3.需要显示头像的页面

      changeBas() {

        console.log(Cookies.get('imageUrl'));

        this.imageUrl = JSON.parse(Cookies.get('imageUrl'));

      },

设定头像   <img :src="imageUrl" alt="">

声明 imageUrl: ''

4.头像变更后，或者进入页面就重新查一次用户头像地址，查看用户的头像地址跟保存的头像地址，不一样调用downX加载新头像文件

JSON.parse(Cookies.get('photoUrl'))  与 远程网络图片地址对比