Display images from firebase storage in html img tags

crispy2k12 picture crispy2k12 · Jul 19, 2016 · Viewed 27.4k times · Source

I'm attempting to display an image from firebase into html img tags, but it fails to retrieve the image.

Javascript code:

var storageRef = firebase.storage().ref();
var spaceRef = storageRef.child('images/photo_1.png');
var path = spaceRef.fullPath;
var gsReference = storage.refFromURL('gs://test.appspot.com')

storageRef.child('images/photo_1.png').getDownloadURL().then(function(url) {
  var test = url;
}).catch(function(error) {

});

html code:

<img src="test" height="125" width="50"/>

Answer

Mosh Feu picture Mosh Feu · Jul 19, 2016

Once you have the test variable, you need to set the image's src to it using a script.

Something like this:

//var storage    = firebase.storage();
//var storageRef = storage.ref();
//var spaceRef = storageRef.child('images/photo_1.png');
//
//storageRef.child('images/photo_1.png').getDownloadURL().then(function(url) {
//
//
//  var test = url;
//  add this line here:
//  document.querySelector('img').src = test;
//
//}).catch(function(error) {
//
//});
//
var test = 'firebase_url';

document.querySelector('img').src = test;
<img height="125" width="50"/>