显示来自存储 Firebase 的图像 (React#)

Question

我可以从 Storage 中获取图像到 Firebase。

const [myImages, setMyImages] = useState();

    useEffect(() => {

      const storage = getStorage();
      const listRef = ref(storage, 'somefolder');

      const allImages = listAll(listRef).then((res) => {

        res.items.forEach((itemRef) => {

          getDownloadURL(ref(storage, `somefolder/${itemRef.name}`)).then((img) =>{
            console.log(img) //link to image
            setMyImages(img)
          }).catch(err => {
            console.log('error getting images ', err);
          })

        })

      }).catch((error) => {
        console.log('error getting all files ', error);
      });


    }, []);

img - 它是特定（一张）图像的 link。现在我想把它保存到 setMyImages 然后在现场渲染：

  return (
    <>
       {myImages.map((oneImg) => (
              <img src={oneImg.img} />
       ))}
    </>
  )

但是map

有点问题

更新

 const [myImages, setMyImages] = useState([]);

 setMyImages(...img)

Answer 1

以下代码适合您。由于异步请求，我用 for-in lopp 替换了 forEach 循环。我在循环之前创建了一个数组，并从循环中将图像推送到其中。

一切都初始化后，我将使用新数组设置状态。就像您已经在做的那样在 JSX 中呈现

此外，如果您想在加载图像时显示图像，则可以这样做

const [myImages, setMyImages] = useState([]);

  useEffect(() => {
    const storage = getStorage();
    const listRef = ref(storage, "somefolder");

    listAll(listRef)
      .then(async (res) => {
        let imagesArray = [];
        for (let i in res.items) {
          const itemRef = res.items[i];
          const img = await getDownloadURL(
            ref(storage, `somefolder/${itemRef.name}`)
          );
          imagesArray.push(img);
        }
        setMyImages(imagesArray);
      })
      .catch((error) => {
        console.log("error getting all files ", error);
      });
  }, []);



return (
    <>
       {myImages.map((oneImg) => (
              <img src={oneImg.img} />
       ))}
    </>
  )

此外，如果您想在加载图像时显示图像，则可以这样做

const [myImages, setMyImages] = useState([]);

  useEffect(() => {
    const storage = getStorage();
    const listRef = ref(storage, "somefolder");

    listAll(listRef)
      .then(async (res) => {
        for (let i in res.items) {
          const itemRef = res.items[i];
          const img = await getDownloadURL(
            ref(storage, `somefolder/${itemRef.name}`)
          );
          setMyImages([...myImages, img]);
        }
   
      })
      .catch((error) => {
        console.log("error getting all files ", error);
      });
  }, []);

Answer 2

我做了一些小改动 @Sulman 代码：

如我所愿有 id 和名字：

listAll(listRef).then(async (res) => {
 let imagesArray = [];
 for (let i in res.items) {
   const itemRef = res.items[i];
   const img = await getDownloadURL(ref(storage, `somefolder/${itemRef.name}`));
   imagesArray.push({id: i, img: img, name: itemRef.name});
 }
 setMyImages(imagesArray);
})

渲染：

{(myImages.length > 0) ? myImages.map((oneImg) => (
   <div key={oneImg.id}>
     <img src={oneImg.img} alt={oneImg.name}/>          
   </div>   
   )) : (
     <div>no images</div>
   )
 }

显示来自存储 Firebase 的图像 (React#)

Display images from storage Firebase (React#)

reactjs

react-hooks

use-state