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

Posted 2023-03-13

【中文标题】如何从 Firebase Storage 获取图像并在 Angular 2 ngFor 中显示它们

【英文标题】：How can I get image from Firebase Storage and display them in Angular 2 ngFor

【发布时间】：2017-04-24 14:30:09

【问题描述】：

我正在尝试在 *ngFor 中显示从 Firebase Storage 下载的图像。

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

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

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)">
    <ons-row>
      <ons-col ><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 存储中读取图像。有什么建议吗？

【问题讨论】：

图像是否对您正在迭代的数组中的每个项目都是唯一的？从上面的代码中，您似乎为所有行显示了相同的图像。

【参考方案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.

我希望它对某人有所帮助。

【参考方案2】：

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

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)">
    <ons-row>
      <ons-col ><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" 更改为返回数组项中每个图像的 URL 的函数，例如 [src]="getUserProfileImage(request)"。

在你的组件中：

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

...

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

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

【讨论】：

@taku 乐于助人！

@taku 考虑将我的答案选为“已接受”，如果它确实可以让其他人看到的话。谢谢！

嗨，你认为这是一种安全的方式吗？

对这个答案有点困惑。从firebase存储中检索url的问题不是吗？这不只是检索不会从 firebase 存储中提供的静态字符串/图像，而是直接存储在应用程序中吗？