'How to retrieve content and its image from firebase using react js

I have managed to push content and image and the name of the image is also added to the database as a reference, and I have managed to retrieve only content. if anyone can help me out it will be great.

As you can see my Home.js code below

Home.js :

function Home(isAuth) {
    const [postList, setPostList] = useState([]);
    const [imageUrl, setImageUrl] = useState(undefined);
    const postsCollectionRef = collection(db, "posts");
    useEffect(() => {
        const getPosts = async () => {
            const data = await getDocs(postsCollectionRef);
            setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
        };

        const getImage = async () => {
            const storage = getStorage()
                .ref('/' + `${post.cover}`) //name in storage in firebase console
                .getDownloadURL()
                .then((url) => {
                    setImageUrl(url);
                })
        }
        getPosts();
    })
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source