Требуемая функция совместного использования для изображений json fetch в ионном 3 с конденсатором

Question

Я делаю приложение для обоев, используя ionic 3 с конденсатором, я хочу загрузить и поделиться функцией в моем приложении, которая выполняет обмен / загрузку изображений.

Мои изображения получены из данных JSON,

Пожалуйста, кто-нибудь, помогите мне с этим. Ниже мой код, который я проверил.

Я пишу код для получения изображений сайта Pixabay с помощью API, мне нужна функция обмена изображениями.

Этот проект Build Ionic с Capcitor, который дает нам приложение Native.

Поставщик:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';        

@Injectable()
export class ImgProvider {

  key: string = 'API-KEY';
  //search: string = 'quotes';

  url = 'https://pixabay.com/api/?key=';

  constructor(public http: Http) {  }

  public getimages(query:any){
  return this.http.get(this.url + this.key+ "&q=" +query+ "&image_type=photo")
  .map(res => res.json());
  }
}

Contact.ts код:

import { Component } from '@angular/core';
import { NavController, LoadingController, ActionSheetController } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';
import { Http } from '@angular/http';
import { ImgProvider } from '../../providers/img/img';
import 'rxjs/add/operator/map';
import { SocialSharing } from '@ionic-native/social-sharing';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { Platform } from 'ionic-angular/platform/platform';
import { File } from '@ionic-native/file';

declare var cordova: any;

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html',
  providers: [ImgProvider]

})

export class ContactPage {
  posts = {};
  search = {
  params: 'nature'
  };
  _imageViewerCtrl: ImageViewerController;

  constructor(
    public navCtrl: NavController,
    private transfer: FileTransfer,
    imageViewerCtrl: ImageViewerController,
    public http: Http,
    private file: File,
    public platform : Platform,
    private socialSharing: SocialSharing,
    public Provider: ImgProvider,
    private actionSheetController: ActionSheetController,
    public loadingController:LoadingController) {

    this.Provider.getimages;    
  }

  ionViewDidLoad(){
    let postsLoadingController = this.loadingController.create({
        content: "getting your images from server"
    });
    postsLoadingController.present();

    this.Provider.getimages(this.search.params)
        .subscribe((data) => {
            postsLoadingController.dismiss();
            this.posts = data
        });
  }


  presentImage(myImage) {
    const imageViewer = this._imageViewerCtrl.create(myImage);
    imageViewer.present();

    setTimeout(() => imageViewer.dismiss(), 1000);
    imageViewer.onDidDismiss(() => alert('Viewer dismissed'));
  }

  doRefresh(refresher) {
    this.Provider.getimages;  // calls the getimages method
    setTimeout(() => {
    refresher.complete(); // stops the refresher 2 seconds after retrieving the data
    }, 2000);
  }

  compileimg(index):string{
    var img = this.posts[index].image ;
    return img.concat(" \n sent from my awesome app");
  }

  regularShare(index){
    var img = this.compileimg(index);
    this.socialSharing.share(null, null, img, null);
  }

  whatsappShare(index){
    var img = this.compileimg(index);
     this.socialSharing.shareViaWhatsApp(null, img, null);
   }

  shareVia(post){
    let shareViaActionSheet = this.actionSheetController.create({
        title:"Share Image",
        buttons:[
        {
            text:"Share",
            icon:"share",
        handler:()=> {
          this.socialSharing.share(post.type,"", post.image, post.pageURL)
        }

        },
        {
            text:"Cancel",
            role:"destructive"
        }

        ]
    });
    shareViaActionSheet.present();
  }

  swipe(event) {
    if(event.direction === 4) {
      this.navCtrl.parent.select(1);
    }
  }




}