1 year ago

#77287

test-img

Ozan Bilgiç

I Cannot Get Images From Firebase Storage Folders Dynamically

I have some folders on Firebase Storage. I want to get photos from folders dynamically, but I cannot.

Example: I try to code a basic E-Commerce website, and every product's photo gallery is a seperated folder. Folder names are also written to my Firestore Database, and when the product.productImageFolder is same with Firebase Storage folder name, show me the photos inside that folder. I want to show images in the tag dynamically, and I try to find a solution for hours but I couldn't make it.

In the code below I can get photo download link, but I want to make it dynamic. Is there any way to do that?

const listRef = ref(storage, "productImages/jacket-for-kids");

    // Find all the prefixes and items.
    listAll(listRef)
        .then((res) => {
            res.items.forEach((itemRef) => {
                // All the items under listRef.
                getDownloadURL(itemRef).then(downloadURL => {
                    console.log(downloadURL);
                })
            });
        })

    return (
        <div className="menRight">

            {
                products.filter(product => product.productGender.includes('Kids')).slice(0, showProducts).map(product => (

                    <div className="menRightCard">
                        <Link to={`/productBuy?id=${product.productImageFolder}`}>
                            <div className="menRightCardimg">
                                <i className="far fa-heart"></i>
                                <img src="" alt="" />
                            </div>
                            <div className="menRightCardInfo">
                                <p className="productInfo">
                                    {product.productName}
                                </p>
                                <p className="productPrice">
                                    €{product.productPrice}
                                </p>
                            </div>
                        </Link>
                    </div>
                ))
            }

enter image description here

I checked some resources to find a solution, but I couldn't find anything on youtube, stackoverflow, firebase documentation or other websites. Is there anyone that can help me with this question?

reactjs

firebase

firebase-storage

0 Answers

Your Answer

Accepted video resources