gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:24:10 24 4
gpt4 key购买 nike

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

我成功从存储中获取图像数据,但我不知道如何在 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 存储中识别图像。有什么建议吗?

最佳答案

保存图片名称和数据库的短路径。

使用以下代码上传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 行代码即可通过权限安全地获取实际 url。

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.

希望对大家有帮助。

关于angular - 如何从 Firebase 存储中获取图像并在 Angular 2 ngFor 中显示它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41054863/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com