从 Firebase 存储获得的 URL 未显示在 Ionic 3 中的 <ion-img [src]=...> 上

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

使用箭头功能：

箭头函数没有自己的 this。使用封闭词法范围的 this 值；箭头函数遵循正常的变量查找规则。因此，在搜索当前作用域中不存在的 this 时，箭头函数最终会从其封闭作用域中找到 this。