如何在本地存储中正确保存/显示图像

Question

我正在使用javaScriptServices开发一个带有react + redux模板的应用程序。我正在使用API​​端点，它将图像作为base64返回，此图像恰好是用户头像图像。 cosuming endpoint的代码：

T

保存到本地存储的功能：

axios.post(API_URL+"api/sample/endpoint").then(function(response){
    saveAvatarLocalStorage(response.data.result);
}).catch(...)

当我获得图像时，我将其保存到本地存储，然后我从代码的不同部分使用它，并避免API调用。

从localstorage获取base64图像的代码：

function saveAvatarLocalStorage(data:any){
    localStorage.setItem('avatar',data);
}

这就是我显示图像的方式：

componentDidMount(){
    ....
    var imgB64 = userService.loadUserAvatar();
    this.setState({imgAvatar: imgB64});
}

到目前为止，（显然）很好。我面临的一个大问题是，大小为1到2 mb的图像可能是一个非常庞大的字符串，可以保存在本地存储中，并且由于localstorage调用是异步的，有时候我的应用程序加载来自api的所有数据，但本地存储图像尚未准备好。有人可以帮我这个吗？