title: How to get image from database inside loop ? React.js
body: <p>I have a features collection in Firestore Database like that.</p>
  <pre class="lang-js prettyprint-override"><code>{
    id: 1 
    title: Title1, 
    subtitle: Subtitle2
    image: features/feature-1.png //point folder name and image name in storage
  }
  </code></pre>
  <p>But for using this image in React I need to convert this image into real string URL</p>
  <p>for that reason Firebase provide something like that</p>
  <pre class="lang-js prettyprint-override"><code>  const getImage = async (imageName:string) =&gt; {
      const starsRef = ref(storage, imageName);
      const imageUrl = await getDownloadURL(starsRef);
      return imageUrl;
    }
  </code></pre>
  <p>So this function take my image (features/feature-1.png) and convert it into something like that
  <strong><a href="https://firebasestorage.googleapis.com/v0/b/example-app.appspot.com/o/features%2Ffeature-1.png?alt=media&amp;token=a999dfce-ee3a-4e02-95a1-6784e5afb9b9" rel="nofollow noreferrer">https://firebasestorage.googleapis.com/v0/b/example-app.appspot.com/o/features%2Ffeature-1.png?alt=media&amp;token=a999dfce-ee3a-4e02-95a1-6784e5afb9b9</a></strong></p>
  <p>So I need to loop my Firestore and everytime run this function to get real URL.</p>
  <pre class="lang-js prettyprint-override"><code>  const featuresFunc = async () =&gt; {
      const featureRef = collection(db, &quot;Features&quot;);
      const data = await getDocs(featureRef);
      let arr:any = [];
      data.forEach(async (doc:any) =&gt; {
        arr.push({...doc.data(), image: await getImage(doc.data().image)});
      })
      console.log(arr)
    }
  </code></pre>
  <p>But it return <code>[]</code> array.</p>
  <p>Here is the whole code at one page;</p>
  <pre class="lang-js prettyprint-override"><code>import { useEffect} from &quot;react&quot;;
  import {db, storage} from &quot;../../firebase/config&quot;
  import { getDocs, collection } from &quot;firebase/firestore&quot;;
  import {ref, getDownloadURL } from 'firebase/storage'
  
  const Features = () =&gt; {
  
    const getImage = async (imageName:string) =&gt; {
      const starsRef = ref(storage, imageName);
      const imageUrl = await getDownloadURL(starsRef);
      return imageUrl;
    }
  
    const featuresFunc = async () =&gt; {
      const featureRef = collection(db, &quot;Features&quot;);
      const data = await getDocs(featureRef);
      let arr:any = [];
      data.forEach(async (doc:any) =&gt; {
        arr.push({...doc.data(), image: await getImage(doc.data().image)});
      })
      console.log(arr);
    }
  
  
    useEffect(() =&gt; {
      featuresFunc();
    },[])
  
  
    return null;
  };
  
  export default Features;
  </code></pre>
  <p>Summary;</p>
  <p>I want to get my objects from Firebase Store and convert it new object with real image URLs.</p>
  <p>like that:</p>
  <pre><code>{title: &quot;title1&quot;, image: features/feature-1.png, .....}
  {title: &quot;title2&quot;, image: features/feature-2.png, .....}
  //into
  {title: &quot;title1&quot;, image: https://firebasestorage.googleapis.com/v0/b/example1, .....}
  {title: &quot;title2&quot;, image: https://firebasestorage.googleapis.com/v0/b/example2, .....}
  </code></pre>