CODEWITHSUNDEEP
firebase-storage
Syaheera Amelia
Syaheera Amelia

Reputation: 11

Cannot display image from firebase in html

I have followed all the steps that required to initialize firebase and display image from firebase storage in html. However, the image do not display. This is part of my code. I hope the experts here can help me in solving this problem.

This is part of my code

<!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>

Upvotes: 1

Views: 186

Answers (1)

Mike McDonald
Mike McDonald

Reputation: 15963

I'm no JavaScript expert, but it looks like you'll need to:

  • Get the correct DOM object
  • Set it's src property to the downloaded URL

The code might look something like this:

<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"/>

Upvotes: 1

Related Questions