javascript - 从 Firebase 存储获取的 URL 未显示在 Ionic 3 中的 上

Question

我正在尝试在我的 ionic 3 项目上显示从 firebase 存储获取的 URL。我在尝试获取标签中 [src] 的 URL 时遇到问题。我试图以字符串的形式传递 URL，但什么也没有出现。当我尝试 console.log 字符串时，控制台中也没有显示任何内容。

这是我的代码:

.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
});

这是我的控制台的图片:

当我点击控制台中的 URL 时，它会将我定向到正确的图像(来自 Firebase 存储)。

我似乎无法将图像取出来。请帮忙!

Answer 1

更改此:

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);

进入此:

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);

使用箭头功能:

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.