如何通过index.html在firebase存储中显示图像
Ore*_*uck 2 javascript firebase firebase-storage
我已经将一些图像上传到firebase的存储空间,然后我需要在网站上显示所有这些图像.我从firebase上读过doc,但仍然无法找到显示所有图片的正确方法.所以,我的问题是,我的代码在哪里显示错误的单个图像？如何同时在网络上显示所有图像(我阅读了关于堆栈溢出的帖子,它可能需要获取所有图像的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控制台的存储空间.
Fra*_*len 15
获取文件的下载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后
有下载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()
A 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
- 非常感谢,弗兰克.我很感激你与我分享你的智慧.它救了我.我花了一整天的时间研究和研究如何从firebase存储下载和显示图像.有许多上传示例,但有一些在线下载示例,以向开发人员展示如何实现.我相信这个例子也会拯救很多人.我再次感谢您在周日下午回答我的问题.周末愉快! (2认同)
- 不客气。顺便说一句：在 Firebase 数据库中存储图像 URL 也包含在 [Firebase Codelab 的第 10 步](https://codelabs.developers.google.com/codelabs/firebase-web/#10) 中。不过，请从头开始（https://codelabs.developers.google.com/codelabs/firebase-web/），因为它会依次引导您了解许多 Firebase 功能。 (2认同)
| 归档时间： |
|
| 查看次数： |
17381 次 |
| 最近记录： |