我无法在我的Angular 7应用中显示存储在Firebase存储中的图像。如何在不使用服务的情况下,从存储的根目录中简单检索图像,然后在HTML中循环以显示图像。
我已经尝试了不同的方法来获取下载URL,但它们都没有起作用。其他方法需要使用服务,而我不想在这种情况下使用服务。
组件
import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/storage';
import { Observable } from 'rxjs'
@Component({
selector: 'app-imageviewer',
templateUrl: './imageviewer.component.html',
styleUrls: ['./imageviewer.component.css']
})
export class ImageviewerComponent implements OnInit {
images: Observable<any[]>;
constructor(private storage: AngularFireStorage) {
storage.ref("/").getDownloadURL().subscribe(downloadURL => {
this.images = downloadURL;
});
}
}
HTML
<div class="gal-list-view">
<div style="margin: 20px">
<div class="responsive" style="margin: 20px">
<div class="gallery" *ngFor="let image of images | async">
<a target="_blank">
<img src="{{image.url}}" alt="" width="600" height="400">
</a>
<div class="desc">Img Title</div>
</div>
</div>
</div>
</div>
我希望只能看到图片,但页面上没有显示任何内容。如果我在第一页并点击前往显示图库的链接,它只会显示空白页并且链接仍然是第一页。但是当我删除 'storage.ref(“/”)。getDownloadURL()。subscribe(downloadURL => { this.images = downloadURL;' 时,第一页可以前往图片库。