Question

我试图在我从Firebase存储下载的* ngFor中显示图像。

我成功从存储中提取图像数据，但我不知道如何在ngFor语句中设置图像数据。

让我在这里向您展示我的代码。

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)">
    <ons-row>
      <ons-col width="20%"><img [src]="userProfileImg"></ons-col>
      <ons-col style="padding-left:20px;">
        <p class="name"><i class="fa fa-venus fa-fw" aria hidden="true"></i>{{request.nickName}}</p>
      </ons-col>
    </ons-row>
</ons-list-item>

这是下载图片的代码。当我订阅FirebaseListObservable数据时，我在foreach中写了这个。

getProfileImageUrl(userId: string) {
    const userStorageRef = firebase.storage().ref().child('images/users/' + userId + "_users.jpg");
    userStorageRef.getDownloadURL().then(url => {
      this.userProfileImg = url
    });
  }

然后，我希望您教我如何从Firebase存储中识别图像。有什么建议吗？

Answer 1

保存图片的名称，以及数据库的短路径。

使用以下代码上传base64图像;

uploadImage(name, data) {
    let promise = new Promise((res,rej) => {
        let fileName = name + ".jpg";
        let uploadTask = firebase.storage().ref(`/posts/${fileName}`).put(data);
        uploadTask.on('state_changed', function(snapshot) {
        }, function(error) {
            rej(error);
        }, function() {
        var downloadURL = uploadTask.snapshot.downloadURL;
            res(downloadURL);
        });
    });
    return promise;
 }

只需2行代码就可以安全地获取实际网址。

this.storageRef = firebase.storage().ref().child('images/image.png');
this.storageRef.getDownloadURL().then(url => console.log(url) );

如果您需要更多的传感器，例如传递字符串，URI等，您可以结帐my blog post about uploading, and getting data from firebase storage using angularfire2.

我希望它有所帮助。

Answer 2

假设图像对每个数组元素都是唯一的：

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)">
    <ons-row>
      <ons-col width="20%"><img [src]="userProfileImg"></ons-col>
      <ons-col style="padding-left:20px;">
        <p class="name"><i class="fa fa-venus fa-fw" aria hidden="true"></i>{{request.nickName}}</p>
      </ons-col>
    </ons-row>
</ons-list-item>

您应该将[src]="userProfileImg"更改为一个函数，该函数返回数组项中每个图像的网址，例如[src]="getUserProfileImage(request)"。

在你的组件中：

...
getUserProfileImage(request: TypeOfRequestHere) {
    return 'images/users/' + request.userId + '_users.jpg';
}
...

<强>更新或者，这可以在模板中完成：

[src]="'images/users/' + request.userId + '_users.jpg'"

如何从Firebase存储中获取图像并在Angular 2 ngFor中显示它们

2 个答案: