I've started to learn firebase, so I need to map and display all images from my storage. I know how to download and display only one image with its' path
const fireBaseApp = initializeApp(firebaseConfig);
function App() {
const [url, setUrl] = useState();
useEffect(() => {
const func = async () => {
const storage = getStorage(fireBaseApp);
const download = ref(storage, "logo.png");
await getDownloadURL(download).then((x) => {
setUrl(x);
});
};
func();
}, []);
return(
<>
<img src={url}/>
</>
);
}
So can anybody explain me, how to map through all images ? Thank you !
You can use listAll() function to list all files in a directory or path.
import { getStorage, ref, listAll } from "firebase/storage";
const storage = getStorage();
// Create a reference under which you want to list
const listRef = ref(storage, '/'); // replace path if needed
listAll(listRef)
.then((res) => {
res.items.forEach((itemRef) => {
// All the items under listRef.
// Can get download URL for each item here
});
})