Получение фотографий с Firebase в ионном 3

Question

Я разрабатываю приложение для обоев телефона ionic3 и использую базу данных Firebase для загрузки фотографий. Сейчас я пытаюсь показать эти фотографии в приложении

как я загружаю 3 фотографии (1.jpg, 2.jpg, 3.jpg) я пишу этот код, чтобы получить их из базы данных

 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 фотографии с простым способом получить

Answer 1

Когда вы загружаете файл, вы должны получить downloadURL с uploadTask.snapshot.downloadedURL и сохранить его, как это

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

С помощью downloadUR вы можете, например, сохранить в массив, а затем зациклить этот массив в html со всеми URL-адресами из сохраненных изображений, например:

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

где downloadUrls может быть, например, строковым массивом. Я заставил себя понять?

Надеюсь, это поможет.

Ps: метод загрузки, который я получаю из Firebase Storage Docs, вы можете проверить его

https://firebase.google.com/docs/storage/web/upload-files?hl=pt-br