Как прочитать или конвертировать URL-адрес большого изображения в изображение?

Question

У меня есть изображение, которое хранится в локальном хранилище. При загрузке изображение отображается.

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>
 )
}

Файловый объект выглядит так:

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

Когда я обновляю страницу и снова пытаюсь загрузить предварительный просмотр, изображение не отображается, а объект файла выглядит иначе:

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

Можно ли прочитать изображение с этого URL? Или невозможно сделать изображение без полного объекта файла?

Answer 1

BLOB-адрес является временным. если вы перезагрузите веб-страницу, URL-адрес блоба исчезнет.
Если вы хотите сохранить изображение в localStorage, вы можете сохранить его как данные base64.

Но если ваше изображение слишком велико, localStorage не подойдет, потому что он имеет ограничения, которые зависят от браузера от 5 МБ до 10 МБ.

Answer 2

Невозможно, насколько я знаю, сохранять файлы в / из localStorage, это потому, что он запускает JSON.stringify поверх данных.