Javascript Firebase getDownloadURL（）获取图像URL的速度非常慢

我有一个页面，在组件中显示多个（12+）对象，每个对象都有一个图像。此图像有一个

src

属性，我正在通过调用Firebase存储设置该属性：

this.props.storage.child('Land.jpg').getDownloadURL().then(function(url) {
            var img = document.getElementById('imageGoesHere'+this.state.currentId);
            img.src = url;
        }.bind(this))

存储

道具由父组件生成并传递：

firebase.initializeApp(config);
var storage = firebase.storage();
var storageRef = storage.ref("");

storageRef

var作为一个道具传递给调用

getDownloadURL（）

函数的每个子组件

这是可行的，但是

getDownloadURL

函数似乎非常慢。页面呈现，然后每个图像至少需要一秒钟才能显示/呈现。我知道这不是原始URL的问题，因为我可以获取原始URL并将其粘贴到

src

中，并且加载良好（即几乎立即）；我查看了chrome devtools中的网络选项卡，它显示了

getDownloadURL

调用和响应之间至少有一秒钟的间隔。这是在网页中显示图像的正确方法吗？Firebase存储文档没有提到任何其他方式

编辑：两件事；首先，我在存储器中只有5个测试映像，所以我并不是在与根存储器ref同步

---

第二件事；ChromeDevTools向我显示它“暂停”了1-4秒，实际请求最多只需要100毫秒。什么会导致暂停？

这可能是因为每次运行此代码时，您都在下载所有图像。如果将实例同步到整个图像层次结构，则可能会发生这种情况

您还可以通过查看Chrome的“网络”选项卡来找出原因，并查看是否有大量文件正在下载，如下所示：

uploadTask.then(function(snapshot) { return snapshot.ref.getDownloadURL() })

---

上传图像时，您应该使用firebase公共url（如果您这样做的话）。大概是这样的：

uploadTask.then(function(snapshot) { return snapshot.ref.getDownloadURL() })

并以中间方式将其保存到数据库中。只需创建一个“images”表并创建一个名为“url”或“link”的列。您每次需要该图像时将使用的url/链接

---

---

现在，如果您要手动上载，请选择图像（在firebase控制台中），并在“文件位置”部分，转到“访问令牌”。

是的，这是12张以上的图像，但我的每个项目都需要一张图像，因为我正在呈现搜索结果，有时我会得到一堆图像。仔细看看chrome开发工具中的计时选项卡，它看起来在任何地方都会暂停2到4秒…@IronWaffleMan你在哪里解决了这个问题？我也面临同样的问题。性能始终取决于网络连接。您能否设置一个jsbin来重现性能问题，以便我可以检查我获得的性能和您获得的性能？您一次只能获取4-10个图像，。取决于浏览器。