2

I am writing an app in react js using firebase as the backend service. The images names and location is stored in the realtime database and is accessed and then the file(image) is fetched from the cloud storage and displayed on the screen.

eg.

getFile(path){
   firebase.database().ref('').child(path).once('value').then(snap =>{
       cloudStorage.child(snap.val()).getDownloadURL().then(url =>{
            this.setState({fetchedImage: url});
       });
   });
}

So the fetched image url is provided as a source to an image tag

<img src={this.state.fetchedImage}/>

Now the image renders after browser downloads it. So after it has downloaded and rendered, if I navigate away from the element and come back again, it will again re download this image. This increases the time taken to load up that element.

Can I download this and save this image to the web storage so that I download the image again when my view re-renders?

Thanks, Zeeshan

Zeeshan Ali
  • 41
  • 6
  • What is your exact problem? It is not clear what does not work (at least IMHO). – Renaud Tarnec Oct 09 '18 at 17:28
  • 1
    You may chain your promises like this: `getFile(path){ firebase.database().ref('').child(path).once('value') .then(snap => { return cloudStorage.child(snap.val()).getDownloadURL(); }) .then(url =>{ this.setState({fetchedImage: url}); }); }` – Renaud Tarnec Oct 09 '18 at 17:29
  • Well I get image url and render it to my view, now when I navigate away from that view and return back again, it still loads up an image from the network. Is there a way to save that image to my web storage so that the second load can be quicker? – Zeeshan Ali Oct 10 '18 at 01:21
  • Did you find a solution for your problem? I'm experiencing the same thing and I'm not sure how to solve it. – Arjen de Jong Dec 06 '19 at 21:11
  • basically used [this](https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache). inside the onload callback, save the image as a ref or state. Or you can use indexDB storage like [pouchDB](https://pouchdb.com) and save it there(not recommended!) – Zeeshan Ali Apr 10 '21 at 13:07

0 Answers0