1 year ago
#77287
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>
))
}
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