如何在 ionic 2 中通过网址将文件从 Firebase 下载到应用程序

Question

我写这个问题是因为我在ionic 2中使用波纹管代码时遇到了小问题。

注意：我从此链接获得它 [ https://firebase.google.com/docs/storage/web/download-files ]

我想从其网址获取上传图像的数据，我需要帮助来创建下载功能以及如何使用它。

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
  // `url` is the download URL for 'images/stars.jpg'
  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();
  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

注意：这是我的上传功能，您可能需要它来了解我如何上传图像（它工作正常）

constructor(...) { 
    this.myPhotosRef = firebase.storage().ref('/Photos/');
}    
uploadPhoto(DataURL){
    let loader = this.loadingCtrl.create({
        content: "Saving..."
    })
    loader.present().then(_=>{
        return this.myPhotosRef.child(this.generateUUID()).child('myPhoto.JPEG')
        .putString(DataURL,firebase.storage.StringFormat.DATA_URL)
        .then((savedPicture) => {
            let tempURL = savedPicture.downloadURL;
            this.afd.list('/notesImages/').push({
                note_id: this.appService.id,
                url: tempURL,
                date: new Date().toISOString()
            });
        });
    }).then(_=>{
        loader.dismiss();
        this.viewCtrl.dismiss();
    })
}

Answer 1

既然你告诉我你知道如何获取你的图像URL，那么我将向你展示一个设置URL的示例，ionic start set-img-url blank

首页.html

<ion-content>
  <img #myimg src=""/>
</ion-content>

首页

import {Component, ViewChild} from '@angular/core';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('myimg') myImgElement;
  constructor() {
    // here is one of my personal firebase storage urls
    let url = 'https://firebasestorage.googleapis.com/v0/b/paystumped.appspot.com/o/map_english.png?alt=media&token=dacc1891-a71d-4c71-a812-5314d566106c';
    // just to simulate you getting that url...
    setTimeout(() => {
      this.myImgElement.nativeElement.src = url;
    }, 1000);
  }
}

使用 ios 对此进行了测试，它就像一个魅力，可以在您使用 ViewChild 动态确定 url 的位置设置图像。