img src doesn't load image through function

Question

Fist of all, I made a sandbox: https://codesandbox.io/s/naughty-almeida-u66mlt?file=/src/App.js

The problem is that the requested image doesn't show when the function gets called and the url is returned.

What I have tried so far and the result:

1. First I added the getDownloadURL() inside the querySnapshot.forEach and pushed the retrieved url to the paths array. It looked like this:

   useEffect(() => {
       const q = query(collection(db, "gallery"));
       const unsubscribe = onSnapshot(q, (querySnapshot) => {
         const path = [];
         querySnapshot.forEach((doc) => {
           getDownloadURL(ref(storage, doc.data().bild)).then((url) {
             path.push(doc.data(), url);
            })
         });
         console.log(path);
         setPaths(path);
       });
       setLoading(false);
       return unsubscribe;
     }, []);
   

   Then I mapped over paths but the image didn't show.

2. I created another useState and called the function getURL(src) inside querySnapshot.forEach(). Inside the getURL() function I updated that state with the retrieved url from getDownloadURL(). Afterwards I added the state to src and it worked.

   But my concern is that, when there is more than one image it fails, I haven't tested it yet.

3. I converted the retrieved url form getDownloadURL to a string. Like so

   function getURL(src) {...} return String(url) but that didn't work either.

The <img /> gets rendered with "alt" Text ,so I think it has something to do with url.

I don't understand the problem in general and I hope somebody can help me to fix it.

Answer 1

Both loading data from Firestore, and getting a download URL for an image is an asynchronous operation. You're calling setPaths(path) before any of the calls to path.push(doc.data(), url) have happened.

I recommend running the code in a debugger, or adding logging, to verify this, as it is key to understanding how to deal with asynchronous APIs.

The solution is always the same: any code that needs data that is loaded asynchronously, needs to be inside the callback that gets called when that data is available.

So in your case, the simplest way to do that would be:

onSnapshot(q, (querySnapshot) => {
  const path = [];
  querySnapshot.forEach((doc) => {
    getDownloadURL(ref(storage, doc.data().bild)).then((url) {
      path.push(doc.data(), url);
      setPaths(path); // ?
    })
  });
});

This sets the paths every time you get a download URL.

---

If you want to wait setting the paths until you got all download URLs, you can use a counter to check the number of documents vs the number of download URLs, or you can use promises and Promise.all:

onSnapshot(q, (querySnapshot) => {
  const promises = querySnapshot.docs.map((doc) => getDownloadURL(ref(storage, doc.data().bild)))
  Promise.all(promises).then((urls) {
    setPaths(urls);
  })
});