Mapping through all images in firebase storage-CodePudding

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 !

CodePudding user response：

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
    });
  })