如何从上传到Firebase的图片中获取离子图片网址?

时间:2018-05-31 13:20:59

标签: angular firebase ionic-framework firebase-realtime-database ionic2

我正在使用Cordova从手机上传手机图像:

async takePhoto(sourceType: number) {
    try {

        const options: CameraOptions = {
            quality: 50,
            targetHeight: 100,
            targetWidth: 100,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            correctOrientation: true,
            sourceType: sourceType
        }
        const result = await this.camera.getPicture(options);
        const image = `data:image/jpeg;base64,${result}`;
        this.pictures = storage().ref('pictures/myphotos');
        this.pictures.putString(image, 'data_url');
        this.Url = this.pictures.getDownloadURL();
              }

catch(e){
  console.error(e);
}}

我正在尝试从以下项目中获取项目:

<ion-label>Item Name</ion-label>
  <ion-input type="text" [(ngModel)]="shoppingItem.itemName"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Amount / Day</ion-label>
  <ion-input type="text" [(ngModel)]="shoppingItem.itemFee"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Description</ion-label>
  <ion-input type="text" [(ngModel)]="shoppingItem.itemDescription">
</ion-input>
</ion-item>

<form-upload></form-upload>
  <button ion-button (click)="takePhoto(0)"> Upload Photo</button>
  <button ion-button (click)="addShopppingItem(shoppingItem)"> Submit </button>

addShopppingItem(shoppingItem: ShoppingItem){
this.shoppingItemRef$.push({itemName:this.shoppingItem.itemName,
  itemFee:this.shoppingItem.itemFee,
  temDescription:this.shoppingItem.itemDescription,
  itemInstructions:this.shoppingItem.itemInstructions,
  itemCategory: this.shoppingItem.itemCategory,
  itemDelivery: this.shoppingItem.itemDelivery,
  url:this.Url
})

我正在获取这些项目,但我无法将图像的URL放入正确的节点。

enter image description here

我需要节点是这样的,以便稍后使用查询显示图像:

enter image description here

1 个答案:

答案 0 :(得分:0)

我不明白你的问题......你是否从数据库中正确检索了downloadUrl?