Question

我无法在我的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>

我只想显示图像，但页面上什么都没有显示。如果我在第1页上，然后单击链接转到显示图片库的页面，则该页面仅显示一个空白页面，而该链接仍为第1页。但是当我取出'storage.ref（“ /”）。getDownloadURL时（）.subscribe（downloadURL => { this.images = downloadURL;`第1页转到图像库。

Answer 1

建议使用服务来实现任何复杂的逻辑。它使角度应用程序更具模块化，并提供了可重用的方法。

您可以使用以下代码将图像上传到 Firebase存储，并同时获取每次上传的 downloadUrl 。

export class UploadService {
  private basePath = '/images';
  file: File;
  url = '';

  constructor(private afStorage: AngularFireStorage) { }

  handleFiles(event) {
    this.file = event.target.files[0];
  }

  //method to upload file at firebase storage
  async uploadFile() {
    if (this.file) {
      const filePath = `${this.basePath}/${this.file.name}`;    //path at which image will be stored in the firebase storage
      const snap = await this.afStorage.upload(filePath, this.file);    //upload task
      this.getUrl(snap);
    } else {alert('Please select an image'); }
  }

  //method to retrieve download url
  private async getUrl(snap: firebase.storage.UploadTaskSnapshot) {
    const url = await snap.ref.getDownloadURL();
    this.url = url;  //store the URL
    console.log(this.url);
  }
}

现在，此 URL参考可以在任何地方用于显示图像。

出于上述原因，我建议使用服务来实现此目的。如果有不清楚的地方，请随时发表评论。

使用Angular 7从Firebase存储中检索图像

1 个答案: