crispy2k12 crispy2k12 - 4 years ago 677
HTML Question

Display images from firebase storage in html img tags

I'm attempting to display an image from firebase into html

tags, but it fails to retrieve the image.

Javascript code:

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

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 Source

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

Something like this:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download