Firebase getDownloadURL（）获取图片网址的速度非常慢

Question

我有一个页面，在组件中显示多个（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))

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

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

storageRef var作为prop传递给调用getDownloadURL()函数的每个子组件。

这样可行，但getDownloadURL函数似乎非常慢。页面呈现，然后每个图像至少需要一秒钟才能显示/呈现。我知道这不是原始网址的问题，因为我可以获取原始网址并将其粘贴到src中并且加载正常（即几乎立即）;我查看chrome devtools中的Network选项卡，它在getDownloadURL调用和响应之间至少显示一秒。这是将图像显示在网页中的正确方法吗？ Firebase存储文档没有提及任何其他方式。

编辑：两件事;首先，我在存储中只有5个测试图像，所以它不像我正在使用根存储参考同步。

第二件事; chrome devtools向我展示它“停滞”1-4秒，而实际请求只需要100ms顶部。什么会导致拖延？

Answer 1

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

您还可以通过查看Chrome的“网络”标签找出原因，看看是否有大量文件下载，如下所示：

Answer 2

上传图片后，您应该使用firebase公共网址（如果这样做的话）。像这样：

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

并将其立即保存到数据库。只需创建一个“图像”表并创建一个名为“ url”或“ link”的列即可。您每次需要该图片时都会使用该网址/链接。

---

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