如何在反应js中显示来自firebase存储的所有图像

Posted 2023-03-22

【中文标题】如何在反应js中显示来自firebase存储的所有图像

【英文标题】：How to display all images from firebase Storage in react js

【发布时间】：2021-12-26 01:22:21

【问题描述】：

我正在尝试显示我存储在 Firebase 云存储中的所有图像。虽然我可以在console.log(fetchUrl) 的帮助下看到链接，但感谢Firebase Doc，但我无法在我的屏幕上显示它们。所以我想到了使用 useState 方法，但它仍然不起作用。我不知道为什么。我见过matches my answer 的一个结果，但它的firebase v8 和v9 与此有很大不同。所以请在这里帮助我。 如果您能帮我从上面的链接翻译 v8 到 v9，那将是非常有帮助的。

const [url, setUrl] = useState([]);

useEffect(() => 

const overviewRef = ref(storage, `behance_projects/$params.id/`);
listAll(overviewRef).then((res) => 
    res.items.forEach((imageRef) => 
        getDownloadURL(imageRef).then((fetchUrl) => 
            setUrl(
                urlLink: fetchUrl,
            )
        )
    )
).catch((err)=> 
    console.log(err)
)
, [params.id]);  

这就是我尝试在网络上展示的方式。

   url.map((url, index) =>
     return <img src=url.urlLink key=index  style=width:"100%", 
     height:"auto"/>
   )

【参考方案1】：

虽然v9的模块化语法不同，但处理多个异步操作的方式还是一样的：使用Promise.all。

在你的情况下是这样的：

listAll(overviewRef).then((res) => 
    let promises = res.items.map((imageRef) => getDownloadURL(imageRef));
    Promise.all(promises).then((urls) => 
        setUrl(
            urlLink: urls,
        )
    )
).catch((err)=> 
    console.log(err)
)

现在setUrl 将在确定所有下载 URL 后调用。然后，您可以在 JSX 中遍历这些 URL 以呈现它们。

【讨论】：

谢谢你弗兰克它的工作！在您建议的代码中，只需更改 setUrl(urls) 因为否则 url.map 显示它不是函数。再次感谢您的帮助。