Question

我写了这个问题，因为我在离子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

由于您告诉我您知道如何获取图片网址，因此我将向您展示使用ionic start set-img-url blank设置网址的示例

home.html的

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

home.ts

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动态确定网址的位置设置图像。

如何通过离子2中的url将文件从firebase下载到app

1 个答案:

home.html的

home.ts