尝试使用 angular fire2 从 firebase 存储中获取多个图像的 downloadURL 时出现问题

Question

我创建了一个 collection 来保存新闻标题、新闻 img、新闻 desc 等。我还创建了工作正常的上传方法，将文件上传到存储并将路径保存到collection.

尝试使用 getDownloadUrl() 检索图像时出现问题；

这是文件

news.component.html

    <div class="container-fluid">
    <div *ngFor="let item of thenews | async">


        <p>
            {{ item.newsTitle }} {{ item.newsDesc }}
        </p>


        <div class="col-md-4">
            <img [src]="getImgUrl(item.newsImg)" class="img-responsive">
        </div>
    </div>
</div>

    <div class="container-fluid">
        <button mat-raised-button (click)="onLogout()">Logout</button>

    </div>

News.component.ts

import { tap } from 'rxjs/operators';
import { AngularFireStorage } from 'angularfire2/storage';

import { AngularFirestoreCollection, AngularFirestoreDocument, AngularFirestore } from 'angularfire2/firestore';
import { Component, OnInit, Injectable } from '@angular/core';
import { AuthService } from './../auth.service';
import { DataService } from '../services/data.service';

import { News } from './../models/newsModel';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})

@Injectable()

export class NewsComponent implements OnInit {

  news = {} as News;
  newsCol: AngularFirestoreCollection<News>;
  thenews: Observable<News[]>;
  imgUrl: Observable<any>;
  theData: News[] = [];


  constructor(public authservice: AuthService, public dataservice: DataService, public afs: AngularFirestore,
    private storage: AngularFireStorage) { }

  ngOnInit() {
    this.newsCol = this.afs.collection<News>('news');
    this.thenews = this.newsCol.valueChanges();
  }

  getImgUrl(img) {
    return this.storage.ref(img).getDownloadURL();
  }


  addNews(news) {
    this.dataservice.addNews(news);
  }


  onLogout() {
    this.authservice.onLogout();
  }

}

服务时，它会进入无限循环。网站挂了。有什么帮助吗？

Answer 1

getDownloadURL() 是一个 observable 方法（异步函数），所以你必须等待 observable 到 return 值，即 url 或 null 如果图像不可用

例如

imageUrl: Observable<string | null>;
const ref = this.storage.ref('users/davideast.jpg');
this.imageUrl= ref.getDownloadURL();

在模板中

<img [src]="profileUrl | async" />

Please refer this link from github

希望对您有所帮助

尝试使用 angular fire2 从 firebase 存储中获取多个图像的 downloadURL 时出现问题

Having issues trying to get downloadURL for multiple images from firebase storage using angular fire2

frontend

firebase

angular6