Javascript 从离子3中的Firebase检索照片
我正在开发一个爱奥尼亚3手机壁纸应用程序,我正在使用Firebase数据库上传照片,现在我正在尝试在应用程序中显示这些照片 就像我上传3张照片(1.jpg,2.jpg,3.jpg)一样,我编写这段代码是为了从数据库中获取它们Javascript 从离子3中的Firebase检索照片,javascript,node.js,angular,firebase,ionic3,Javascript,Node.js,Angular,Firebase,Ionic3,我正在开发一个爱奥尼亚3手机壁纸应用程序,我正在使用Firebase数据库上传照片,现在我正在尝试在应用程序中显示这些照片 就像我上传3张照片(1.jpg,2.jpg,3.jpg)一样,我编写这段代码是为了从数据库中获取它们 imageSource; photo; constructor(public navCtrl: NavController, public navParams: NavParams) { this.imageSource = (1); this.
imageSource;
photo;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.imageSource = (1);
this.getPhotoURL();
}
getPhotoURL() {
firebase.storage().ref().child('/' + this.imageSource + '.jpg').getDownloadURL().then((url) => {
this.photo = url;
})
}
在HTML中我有这个
<ion-col>
<img src="{{photo}}">
</ion-col>
但只能获取我在| this.imageSource=(1)中写入的照片名称;“| |.
每次我想拍一张新照片,我都要做一个新的功能
那么,我怎样才能自动更新我上传的任何照片呢
或者我需要一个更好的代码,它可以让我用一种简单的方式检索3张照片?当你上传文件时,你必须用uploadTask.snapshot.downloadeURL获取下载URL并保存它,如下所示
public downloadedUrls: [];
var uploadTask = storageRef.child('images/rivers.jpg').put(file);
// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', function(snapshot){
// Observe state change events such as progress, pause, and resume
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED: // or 'paused'
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
}
}, function(error) {
// Handle unsuccessful uploads
}, function() {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
this.downloadedUrls.push(uploadTask.snapshot.downloadURL);
});
例如,使用downloadedUR,您可以保存在一个数组中,然后,您可以在html中使用保存的图像中的所有url循环此数组,如下所示:
<ion-col *ngFor="let photo of downloadedUrls">
<img src="{{ photo }}">
</ion-col>
例如,下载的URL可以是字符串数组。我明白了吗
希望能有帮助
Ps:我从Firebase存储文档中获得的上传方法,您可以查看
我不需要上传任何东西,我只想展示我的照片是的,但要展示你的照片,你必须下载,对吗?要下载,在某个时刻,你是否上传了?值得一试