Quiero ver todas las imágenes cargadas desde una carpeta específica en mi depósito de almacenamiento de Firebase.
Logré obtener la lista de todas las URL en la carpeta, pero cuando intento verlas, solo se muestra una imagen y el resto no se muestra.
¿Qué estoy haciendo mal?
Aquí está mi código:
const [allRandomImages,setAllRandomImages] = useState([]) const images = [] const getRandomImages = () => { const storageRef = storage.ref(`random/${AWB}`) storageRef.listAll().then((result) => { result.items.forEach((imageRef) => { imageRef.getDownloadURL().then((url) => { console.log(url); images.push(url) setAllRandomImages(images) }) }) }) } useEffect(() => { getRandomImages() },[]); return ( <div> <a><img id="packing" alt="" style={styles} /></a> <a><img id="commercial" alt="" style={styles} /></a> <a><img id="cof" alt="" style={styles} /></a> <a><img id="otherdoc" alt="" style={styles} /></a> { allRandomImages.map((img, i) => ( <img src={img} /> ))} </div> )Dado que desea ejecutar, en paralelo , un número indeterminado de llamadas al método asincrónico getDownloadURL() , puede usar Promise.all() de la siguiente manera (no probado):
storageRef.listAll() .then((result) => { const promises = []; result.items.forEach((imageRef) => { promises.push(imageRef.getDownloadURL()); }); return Promise.all(promises); }) .then(urlsArray => { setAllRandomImages(urlsArray); }); También puede usar map , de la siguiente manera:
storageRef.listAll() .then((result) => { return Promise.all(result.items.map(imageRef => imageRef.getDownloadURL()); }) .then(urlsArray => { setAllRandomImages(urlsArray); });