如何通过index.html显示firebase存储中的图像
我已经上传了一些图像到Firebase的存储，然后我需要在一个网站上显示所有这些图像。我已经阅读了firebase的文档，但仍然无法找到正确的方式来显示所有的图片。所以，我的问题是，我的代码在什么地方错误地显示了一个偶数的单个图像？如何在web上同时显示所有图像（我读过一篇关于堆栈溢出的帖子，它可能需要获取所有图像的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控制台的存储。
共有1个答案
查看代码中的流程的最简单方法是添加一些日志记录语句：
console.log('Before requesting download URL');
tangRef.getDownloadURL().then(function(url) {
console.log('Got download URL');
});
console.log('After requesting download URL');
控制台输出将为：
在请求下载URL之前
tangRef.getDownloadURL().then(function(url) {
document.querySelector('img').src = url;
}).catch(function(error) {
console.error(error);
});
注意：默认情况下，Firebase存储桶需要Firebase身份验证才能上传文件。您可以更改Firebase存储安全规则以允许未经身份验证的访问。由于默认的Google App Engine应用程序和Firebase共享这个bucket，配置public access可能会使新上传的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
-
我无法检索Flutter Web上Firebase存储的图像。 附有：
-
我正在编写一个代码来显示关于我的公司让用户访问的不同城市的图像。我想显示关于你要做什么和去公司列表中的地方旅行的信息。我已经用firebase存储中的文本文件上传了信息。当我点击我的活动时，我希望使用存储在Firebase中的文本文件来显示信息。我做不到。我已经尝试使用图像并从firebase获取图像，但我仍然无法获取文本文件。我该怎么做？
-
Firebase存储图像三分之二天未显示。我有一些发布的应用程序，在这些应用程序里面有一些图片显示从Firebase存储，现在突然它不显示/查看。我还从浏览器>Firebase Console>Storage检查了那些图像，但它没有显示图像预览，并且显示：“错误加载预览”。但我的Firebase Firestore数据显示没有任何错误。我查了储存配额，没有问题。我的火力点计划是“燃烧”，随走随付。
-
问题内容： New Firebase的扩展问题检索数据并将其放在tableView（Swift） 通过将Firebase代码移动到viewDidLoad，Post的所有文本部分都可以显示出来。但是我仍然不能将图像放到tableView中。我已经检查了图像检索，并成功了，我想我从Firebase检索的图像不在发布数组中。 这是我的修复代码： 我的Post结构希望对您有所帮助！ 希望能得到一些建议！
-
问题内容： 我正在尝试显示上传到MySql中“存储”表的最后5张图像。我对PHP和数据库完全陌生，并且我一直在阅读有关如何做到这一点的很多文章，但是没有运气。 我可以一次存储和显示图片，但我希望能够拥有各种各样的画廊来显示最近上传的5张照片。 任何建议或帮助将不胜感激，谢谢！ 附言：我知道将图片存储到这样的数据库时不赞成这样做，但是该项目仅用于实践。 index.php get.php 问题答案：
-
我正试图通过adb shell在我的三星Note 3上显示本地图像。 ，但仍然不起作用。有人能帮我吗，真的很感激！