Question

我已经按照初始化firebase所需的所有步骤，并在html中显示来自firebase存储的图像。但是，图像不显示。这是我的代码的一部分。我希望这里的专家可以帮助我解决这个问题。

这是我的代码的一部分

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, height=device-height,              initial-scale=1, maximum-scale=1, user-scalable=yes">
 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
 <link rel="stylesheet" href="components/loader.css">
 <script src="components/loader.js"></script>
 <ons-toolbar>
 <!-- <div class="center">Page2</div> -->
 <a href= "index.html" class="button" target="_self"> BACK</a>
 </ons-toolbar>
 </head>
 <body>    
 <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js">          </script>
 <script>
 // Initialize Firebase
 var config = {
 apiKey: "AIzaSyBIGAWQPXoU0446Ghupx8wxS9buveKY2jA",
 authDomain: "displaysop.firebaseapp.com",
 databaseURL: "https://displaysop.firebaseio.com",
 projectId: "displaysop",
 storageBucket: "displaysop.appspot.com",
 messagingSenderId: "82849386400"
 };
 firebase.initializeApp(config);

 var storageRef = firebase.storage.ref('images/PRSB Map.jpg');

 storageRef.put('images/PRSB Map.jpg').getDownloadURL().then(function(url){
 var test = document.querySelector('images').src;

 }).catch(function(error){
 });

 </script>

 <img src="test" height="125" width="125"/>
 </body>
 </html>

Answer 1

我没有JavaScript专家，但看起来你需要：

获取正确的DOM对象
将其src属性设置为下载的网址

代码可能如下所示：

<script>
...
storageRef.put('images/PRSB Map.jpg').getDownloadURL().then(function(url) {
   var test = document.querySelector('#test');
   test.src = url;
});

</script>
...
<img id="test" height="125" width="125"/>

无法在html中显示来自firebase的图像

1 个答案: