通过 api 检索图像 blob，将对象 url 存储在本地存储中，刷新时图像错误答案

【问题标题】：Retrieving image blob via api, storing object url in local storage, image errors out upon refresh通过 api 检索图像 blob，将对象 url 存储在本地存储中，刷新时图像错误
【发布时间】：2019-11-14 11:23:06
【问题描述】：

我试图避免在加载页面时调用获取个人资料图片。我将图像作为 blob 获取，并将其转换为对象 url，然后将其存储在本地存储中。我注意到在刷新页面时图像出错了，我不确定为什么会这样，对象 url 没有保存在本地存储中吗？如果是这样，我该如何保存图像的数据？

axios({
        url:   '/users/avatar',
        method: 'GET',
        headers: {
          'Authorization': "Bearer " + token,
        },
        data: {avatar: avatarUrl},
        responseType: 'blob',
      }).then((response) => {
        log(response);
        let blob = URL.createObjectURL(response.data)
        localStorage.setItem('image', blob);

}

【问题讨论】：

您能否在 crom localstorage 中检查您的图像是否在从 api 获取后保存？
是的，所以在获取后保存时，它看起来像这样。 ` blob:localhost:3000/83bc8dcd-bb56-49cb-a9a7-81c66d872a03 ` 刷新后有时会变成这个 ` /static/media/default.c7401ecc.png `
第二个是onerror函数默认的默认图片。我认为您的解决方案不起作用，因为当它变成一个对象 url 时它已经是一个字符串。

标签： reactjs local-storage blob

【解决方案1】：

axios({
        url:   '/users/avatar',
        method: 'GET',
        headers: {
          'Authorization': "Bearer " + token,
        },
        data: {avatar: avatarUrl},
        responseType: 'blob',
      }).then((response) => {
        log(response);
        let blob = URL.createObjectURL(response.data)
        localStorage.setItem('image', JSON.stringify(blob));

}

变成这样

let getImage = JSON.parse(localStorage.getItem('image'));

【讨论】：