Question

我是一位相当新奇的Ionic开发人员，使用Firestore构建了此项目列表Ionic应用程序，到目前为止一切工作都非常顺利-现在我要在项目中添加图片。

将图片成功上传到存储后-我设法将URL保存到我的项目中，我认为就是这样，并且应该通过简单地引用它就可以正常工作，例如“ [src] =“ project。图片” ，但我意识到它没有为我提供Firestore Storage的完整URL，显然必须使用方法“ getDownloadURL（）”来接收最后一点“？。

下面的代码是其中一种方法，我尝试通过以下方法完成此任务-失败。通过执行前面提到的代码，导致应用程序没有响应，然后导致崩溃，并且没有项目图片..

projectlist.html

<ion-card *ngFor="let project of projectsService.projectList | async" (click)="openProject(project)">

                <ion-card-content>
                  <ion-item text-right><h3><b>Status:</b> {{project.status}}</h3></ion-item>
                <ion-item text-left text-wrap>
                    <p><img *ngIf="project.picture"[src]="getProjectPictureByRowId(project)"></p>
                      <h2><b>{{project.name}}</b></h2> 
                      <p>{{project.description}}</p>
                </ion-item>

projectlist.ts

getProjectPictureByRowId(project : Project) {
  project.picture = this.projectsService.getProjectPictureByRowId(project);
}

projects.ts（提供者）

getProjectPictureByRowId(project) {

const ref = this.storage.ref(project.picture);
return project.picture = ref.getDownloadURL().toString();

}

我有一个使用文档（https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md）中以下代码的半成品解决方案，但只有打开单个项目但不在项目列表中时有效：

@Component({
selector: 'app-root',
template: `<img [src]="profileUrl | async" />`
})
export class AppComponent {
profileUrl: Observable<string | null>;
constructor(private storage: AngularFireStorage) {
 const ref = this.storage.ref(project.picture);
 this.profileUrl = ref.getDownloadURL();
 }
}

我在这里不知所措-我已经用光了我所有的Google-fu。请帮帮我！

此致

詹斯

Answer 1

如果您查看definition of StorageReference.getDownloadUrl()，将会看到它返回了一个承诺：

getDownloadURL(): Promise<string> { ...

因此，调用不会返回URL本身，而是一个最终会解析为该URL的承诺。任何需要下载URL的代码都需要处理异步加载的事实。

在AngularFire2（包装上面的代码）中，此承诺被转换为可观察的下载URL。根据{{3}}，这意味着您需要将其作为async绑定到我们的HTML。所以：

<img *ngIf="project.picture" [src]="getProjectPictureByRowId(project) | async"></p>

AngularFire2 / Firestore存储-getDownloadURL（）（离子）

1 个答案: