如何将图片Blob网址读取或转换为图片？

Question

I have an image that is stored in local storage. On load the image is displayed.

componentDidMount() {
 const reader = new FileReader();
 reader.onload = e => {
  this.setState({ blob: e.target.result });
 };
 reader.readAsDataURL(this.props.file);
}
render() {
 return (
  <div>
   <img src={this.state.blob} />
  </div>
 )
}

The file object looks like this:

lastModified:1535424554987
name:"test.jpeg"
preview:"blob:http://localhost:8080/b52098ca-087f83c778f0"
size:41698
type:"image/jpeg"
webkitRelativePath:""

When I refresh the page and try to load the preview again, it doesn't display the image, and the file object looks different:

{preview: "blob:http://localhost:8080/b52098ca-087f83c778f0"}

Is it possible to read the image from this url? Or is it impossible to render the image without the full file object?

Answer 1

blob URL is temporary. if you reload the web page, the blob URL will gone.
If you want to save the image in localStorage you can save it as base64 data.

But if your image is too big localStorage won't suit because it has limits which depend on the browser from 5MB to 10MB.

Answer 2

据我所知，将文件保存到localStorage或从中保存是不可能的，这是因为它对数据运行JSON.stringify。