问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何通过 index.html 在 firebase 存储中显示图像

社区维基
1
新手上路，请多包涵

我已经将一些图片上传到 firebase 的存储中，然后我需要在网站上显示所有这些图片。我已经阅读了 firebase 的文档，但仍然找不到显示所有图片的正确方法。所以，我的问题是，我的代码哪里错了，无法显示单个图像？如何同时在网络上显示所有图片（我看了一篇关于stack overflow的帖子，它可能需要获取所有图片的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 控制台的存储

原文由 OregonDuck 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptfirebasefirebase-storage
阅读 261
2 个回答
得票最新
社区维基
1
✓ 已被采纳

获取文件的下载 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);
});

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

获取 https://firebasestorage.googleapis.com/v0/b/cropped-images.appspot.com/o/images%2FTang.png 403 ()

403 表示您无权读取图像。您的存储桶很可能仍有默认安全规则，这意味着只有经过身份验证的用户才能访问这些文件。这在 Firebase 存储文档的第一个蓝色注释中提到，用于读取/写入文件（强调我的）：

注意：默认情况下，Firebase 存储桶需要 Firebase 身份验证才能上传文件。您可以 更改 Firebase 存储安全规则 以允许未经身份验证的访问。由于默认的 Google App Engine 应用程序和 Firebase 共享此存储桶，因此配置公开访问可能会使新上传的 App Engine 文件也可公开访问。 设置身份验证时，请务必再次限制对存储桶的访问。

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

 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

原文由 Frank van Puffelen 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

另一种解决方案不是公认的，只需更改默认规则以允许用户从名为 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 部分。

原文由 Eran H. 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题