如何通过 index.html 在 Firebase 存储中显示图像答案

【问题标题】：How to show images in firebase storage by index.html如何通过 index.html 在 Firebase 存储中显示图像
【发布时间】：2016-12-13 15:51:06
【问题描述】：

我已将一些图片上传到 Firebase 的存储中，然后我需要在网站上显示所有这些图片。我已经阅读了 firebase 的文档，但仍然找不到显示所有图片的正确方法。所以，我的问题是，我的代码在哪里显示一个单一的图像是错误的？如何同时显示网络上的所有图像（我读了一篇关于堆栈溢出的帖子，它可能需要获取所有图像的 URL，所以，子问题是如何获取所有图像的 URL）？顺便说一句，我的 firebase 的数据库是空的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

    <script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
    <script>
        var config =
        {
            apiKey: "AIzaSyCKtgPuXUUqoyiwEm5sU3Blqc-A9xtBFsI",
            authDomain: "cropped-images.firebaseapp.com",
            databaseURL: "https://cropped-images.firebaseio.com",
            storageBucket: "cropped-images.appspot.com",
        };

        firebase.initializeApp(config);
        var storage = firebase.storage();
        var storageRef = storage.ref();
        var tangRef = storageRef.child('images/Tang.png');

        tangRef.getDownloadURL().then(function(url) 
        {
            var test = url
            document.querySelector('img').src = test;
        }).catch(function(error) 
        {
            switch (error.code) 
            {
                case 'storage/object_not_found':
                    break;

                case 'storage/unauthorized':
                    break;

                case 'storage/canceled':
                    break;

                case 'storage/unknown':
                    break;
            }
        });

        var test = 'firebase_url';
        document.querySelector('img').src = test;



    </script>
    <img height="125" width="125"/>
    </body>
</html>

这是我的 Firebase 控制台的存储空间。

【问题讨论】：

有什么问题？
如何在网络上显示 Firebase 存储中的所有图像？非常感谢！
重复您的问题中已有的内容不会推动我们前进。是什么让您无法实现该功能？是您不知道如何获取文件列表吗？因为如果这是您的问题，请查看以下问题/答案：stackoverflow.com/questions/37335102/…
感谢您的分享。在我问这个问题之前，我已经阅读了这个链接。对不起，我的问题不够清楚。我有两个问题，首先，我关注了firebase官方网站上的文档和Display images from firebase storage in html omg tags，但我仍然无法让存储中的图像正确显示在网络上。我的代码哪里错了？其次，我没有找到获取存储下所有图像的url的代码。如何获取所有图片的网址？再次，非常感谢！ @FrankvanPuffelen
我将在下面回答您的第一个问题。链接的问题与您的第二个问题完全相同。没有列出图像 URL 的 API，因此您必须将它们存储在其他地方。例如在 Firebase 数据库中。

标签： javascript firebase firebase-storage

【解决方案1】：

使用

<image src="your_image_url">

将图片 url 赋予 src 属性，它将显示来自 firebase 存储的图片。

【讨论】：

【解决方案2】：

另一种解决方案是接受，只需更改默认规则以允许用户从名为images 的目录获得只读权限。

service firebase.storage {
  match /b/{bucket}/o {
    match /images/{fileName} {
      allow write: if request.auth != null;
      allow read;
    }

    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

在此之后，获取目录中文件的下载 url 并删除 token 部分。

【讨论】：

【解决方案3】：

获取文件的下载 URL 需要往返 Firebase 服务器。这个调用（就像大多数现代互联网一样）是异步发生的，因为在等待响应时阻塞浏览器会带来不好的用户体验。

在代码中查看流程的最简单方法是添加一些日志语句：

console.log('Before requesting download URL');
tangRef.getDownloadURL().then(function(url) {
    console.log('Got download URL');
});
console.log('After requesting download URL');

控制台输出将是：

在请求下载 URL 之前

请求下载地址后

获取下载地址

可能不是您期望的顺序，这意味着将下载 URL 设置到 HTML 的代码必须在 then() 回调中。

您还忽略了catch() 回调中可能引发的错误。如果您在那里添加一些日志记录：

tangRef.getDownloadURL().then(function(url)                             {
  document.querySelector('img').src = url;
}).catch(function(error) {
  console.error(error);
});

代码不仅很多更短，它实际上准确地显示了问题所在：

GEThttps://firebasestorage.googleapis.com/v0/b/cropped-images.appspot.com/o/images%2FTang.png403()

403 表示您没有读取图像的权限。很可能您的存储桶上仍有默认安全规则，这意味着只有经过身份验证的用户才能访问文件。 Firebase Storage docs for reading/writing files（强调我的）的第一个蓝色注释中提到了这一点：

注意：默认情况下，Firebase 存储分区需要 Firebase 身份验证才能上传文件。您可以change your Firebase Storage Security Rules 允许未经身份验证的访问。由于默认的 Google App Engine 应用和 Firebase 共享此存储桶，因此配置公开访问权限可能会使新上传的 App Engine 文件也可以公开访问。 请务必在设置身份验证时再次限制对存储分区的访问。

在这种情况下，我采用了强调的方法，并在请求图像的下载 URL 之前添加了代码以（匿名）登录用户。这导致以下完整代码sn-p：

var config = {
  apiKey: "AIzaSyCKtgPuXUUqoyiwEm5sU3Blqc-A9xtBFsI",
  authDomain: "cropped-images.firebaseapp.com",
  databaseURL: "https://cropped-images.firebaseio.com",
  storageBucket: "cropped-images.appspot.com",
};

firebase.initializeApp(config);
var storage = firebase.storage();
var storageRef = storage.ref();
var tangRef = storageRef.child('images/Tang.png');

// First we sign in the user anonymously
firebase.auth().signInAnonymously().then(function() {
  // Once the sign in completed, we get the download URL of the image
  tangRef.getDownloadURL().then(function(url)                             {
    // Once we have the download URL, we set it to our img element
    document.querySelector('img').src = url;
    
  }).catch(function(error) {
    // If anything goes wrong while getting the download URL, log the error
    console.error(error);
  });
});

完整的工作jsbin：http://jsbin.com/kukifo/edit?html,js,console,output

【讨论】：

非常感谢，弗兰克。我非常感谢你与我分享你的智慧。它救了我。我花了一整天的时间研究和研究如何从 Firebase 存储中下载和显示图像。上传的例子很多，但是网上下载的例子有几个，给开发者展示如何实现。我相信这个例子也会拯救很多人。再次感谢您在周日下午回答我的问题。周末愉快！
另外，这是一个非常详细的解释。非常感谢！
不客气。顺便说一句：在 Firebase 数据库中存储图像 URL 也包含在 step 10 of the Firebase Codelab 中。不过，请从the start 开始，因为它会依次引导您了解许多 Firebase 功能。
谢谢。我以前什至没有找到这个文档。再次感谢您的分享。祝你好运！