从Firebase存储中检索一系列照片

时间:2019-06-06 14:41:51

标签: angular firebase ionic-framework firebase-storage ionic4

当我使用离子在3个以上的应用程序中工作时 每次遇到同一个问题,即从Firebase存储中检索数据

例如照片

说实话,获取一张照片的downloadURL很不错,但是要获取很多照片的downloadURL并使用* ngFor

自动将其设为

它是世界上最困难的事情

如果您对此工作有任何帮助,请让我感激不尽

我写这段代码来完成工作

export class AdmPage{


  public downloadedUrls: [];


  constructor() {  

    const file = `image/jpg`
    var storageRef = firebase.storage().ref();

  var  uploadTask = storageRef.child('images/rivers.jpg').put(file);


    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);

      });

    }
    }

以HTML格式显示

 <ion-col *ngFor="let photo of downloadedUrls">
        <img src="{{ photo }}">
     </ion-col>

但不起作用

没有显示我在Firebase存储中上传的照片

在chrome控制台中说这句话

ERROR Error: Uncaught (in promise): [DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at app (index.cjs.js:307)
    at Object.serviceNamespace [as storage] (index.cjs.js:366)
    at new AdmPage (adm.page.ts:22)
    at createClass (core.js:22148)
    at createDirectiveInstance (core.js:22029)
    at createViewNodes (core.js:23255)
    at createRootView (core.js:23169)
    at callWithDebugContext (core.js:24177)
    at Object.debugCreateRootView [as createRootView] (core.js:23687...

0 个答案:

没有答案