首页 > 解决方案 > 如何在 ReactJS 中显示 Firebase 存储下载 URL

问题描述

我正在尝试显示我在我的 firebase 控制台中拥有的文件的所有下载 URL 的列表。我可以将它们记录到控制台并查看它们,但我无法弄清楚如何访问它们并将它们显示在 UI 上。我试图在我的 displayFile 函数的 return 语句中将它们返回到 UI。我在网上看到的大多数示例都是用于图像的,但我主要是存储文档。我可能与它有关,因为我无法制作 img 标签并将 src 设置为 url。谢谢!

listFiles = () => {
const storage = firebase.storage().ref('files');
storage.listAll().then(function(result){
    result.items.forEach(function(fileRef) {
        displayFile(fileRef);
        });
    }).catch(function(error){
        //handle any errors TODO
    })

function displayFile(fileRef){
    fileRef.getDownloadURL().then(function(url) {
        //console.log(url);
        //return file URLS
        return(
            <ul>
                <li>
                    {url}
                </li>
            </ul>
        )

    }).catch(function(error) {
        //TODO
    })
}
}

标签: reactjsfirebaseuser-interfaceurlfirebase-storage

解决方案


推荐阅读