Ionic 3 Image storage issue

@bharned3 wrote:

Can someone give an example on the best way to get images from a URL, save to storage and then call back later to use in my app.

Here is the code I an trying to use now.

GET IMAGES FROM HTTP Call

//get vechicle related Images
  getVehicleImages() {
    return new Promise((resolve, reject) => {
      this.storageService.pullFromStorage('storedVehicles')
        .then((vehiclesResponse) => {
          for (let vehicle of vehiclesResponse.response) {
            let allImages: any[] = [this.httpService.getImageRequest(this.imageUrl +
                                            '/compositor/?model=' +
                                             vehicle.option_codes.slice(0, 2).toLowerCase() +
                                            '&view=STUD_SIDE&size=1900&file_type=jpg&bkba_opt=1&options=' +
                                             vehicle.option_codes)
                              ,this.httpService.getImageRequest(this.imageUrl +
                                            '/compositor/?model=' +
                                             vehicle.option_codes.slice(0, 2).toLowerCase() +
                                            '&view=STUD_SEAT&size=1900&file_type=jpg&bkba_opt=0&options=' +
                                             vehicle.option_codes)
                              ,this.httpService.getImageRequest(this.imageUrl +
                                           '/compositor/?model=' +
                                            vehicle.option_codes.slice(0, 2).toLowerCase() +
                                           '&view=STUD_SEAT_DRIVER&size=1900&file_type=jpg&bkba_opt=0&options=' +
                                            vehicle.option_codes)
                              ,this.httpService.getImageRequest(this.imageUrl +
                                           '/compositor/?model=' +
                                             vehicle.option_codes.slice(0, 2).toLowerCase() +
                                           '&view=STUD_REAR&size=1900&file_type=jpg&bkba_opt=0&options=' +
                                             vehicle.option_codes)
                              ,this.httpService.getImageRequest(this.imageUrl +
                                              '/compositor/?model=' +
                                                vehicle.option_codes.slice(0, 2).toLowerCase() +
                                              '&view=STUD_SIDE&size=1900&file_type=jpg&bkba_opt=4&options=' +
                                                vehicle.option_codes)               
                              ];             
              forkJoin(allImages)              
              .subscribe((allImgResponses) => {
                this.vehicleImages.push({
                  'VECHILE_ID': vehicle.vehicle_id,
                  'STUD_SIDE': this.arrayBufferToBase64(allImgResponses[0]),
                  'STUD_SEAT': this.arrayBufferToBase64(allImgResponses[1]),
                  'STUD_SEAT_DRIVER': this.arrayBufferToBase64(allImgResponses[2]),
                  'STUD_REAR': this.arrayBufferToBase64(allImgResponses[3]),
                  'STUD_SIDE1': this.arrayBufferToBase64(allImgResponses[4])
                });
                if (vehiclesResponse.response.length == this.vehicleImages.length) {
                  this.storageService.pushIntoStorage('storedVehiclesImages', this.vehicleImages);
                  resolve();
                }
              },(error) => { throw error;})
          }
        })
    });
  }

Then on my home page.ts I am calling this to pull from storage

  buildVehicleImageUrls() {
    this.teslaProvider.getLocalStorageVehiclesImages(this.currentVehicle.vehicle_id)
      .then((currentVehicleImages) => {
            this.currentVehicleImagesUrls['STUD_SEAT'] = 'data:image/jpg;base64,' + currentVehicleImages.STUD_SEAT;
            this.currentVehicleImagesUrls['STUD_SIDE'] = 'data:image/jpg;base64,' + currentVehicleImages.STUD_SIDE;
            this.currentVehicleImagesUrls['STUD_SEAT_DRIVER'] = 'data:image/jpg;base64,' + currentVehicleImages.STUD_SEAT_DRIVER;
            this.currentVehicleImagesUrls['STUD_REAR'] = 'data:image/jpg;base64,' + currentVehicleImages.STUD_REAR;
            this.currentVehicleImagesUrls['STUD_SIDE1'] = 'data:image/jpg;base64,' + currentVehicleImages.STUD_SIDE1;
            
        });
  }

Then I am doing something like this to display in the html file.

[src]="currentVehicleImagesUrls['STUD_SEAT']"

All this works when I serve up on my mac in the browser and even works on the device for Android , but on my IOS device it is just blank.

Any clue or is there a better way

Posts: 1

Participants: 1

Read full topic