crispy2k12 crispy2k12 - 4 months ago 129
HTML Question

Display images from firebase storage in html img tags

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

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