CODEWITHSUNDEEP
javascriptangularfirebaseionic-frameworkfirebase-storage
John Arc
John Arc

Reputation: 183

The URL obtained from Firebase storage is not showing on my <ion-img [src]=...> in Ionic 3

I am trying to display the URL obtained from firebase storage on my ionic 3 project. I am having issues with trying to get the URL to my [src] in the tag. I tried to bring the URL over in the form of a string but nothing comes out. When I tried to console.log the string, nothing appears in the console as well.

Here are my codes:

.html:

 <ion-img class="imgBooking" [src]=retrievedRestaurantImage  item-content></ion-img>

.ts:

retrievedRestaurantImage:any;

...

var storage = firebase.storage();
var pathReference = storage.ref('Restaurant/ABC_Restaurant/ABCRestaurantPicture.jpg');

pathReference.getDownloadURL().then(function(url){

console.log(url); <-- This URL appears in the console, and after clicking on the link, it directs me to the correct picture.
this.retrievedRestaurantImage = url; 
console.log(this.retrievedRestaurantImage); <-- Does not display in console, image is not updated in the <ion-img> tag.

}).catch(function(error) {
 // Handle any errors
});

Here is a picture of my console: enter image description here

When I clicked on the URL in the console, it directs me to the correct image (from firebase storage).

I just can't seem to get the image out. Please help!

Upvotes: 0

Views: 558

Answers (1)

Peter Haddad
Peter Haddad

Reputation: 80914

Change this:


pathReference.getDownloadURL().then(function(url){

console.log(url); <-- This URL appears in the console, and after clicking on the link, it directs me to the correct picture.
this.retrievedRestaurantImage = url; 
console.log(this.retrievedRestaurantImage);

Into this:


pathReference.getDownloadURL().then((url) =>{

console.log(url); <-- This URL appears in the console, and after clicking on the link, it directs me to the correct picture.
this.retrievedRestaurantImage = url; 
console.log(this.retrievedRestaurantImage);

Use arrow function:

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in current scope, an arrow function ends up finding the this from its enclosing scope.

Upvotes: 1

Related Questions