Ionic 3 не показывает путь камеры FILE_URI в изображении src

Question

вот мой HTML-код

<img [src]="profileImage"/>
<button (click)="openCamera()"> Upload </button>

ниже - мой компонентный код

import { ViewController, Platform, normalizeURL } from 'ionic-angular';

openCamera() {
let options = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    saveToPhotoAlbum: false,
    targetWidth: 400,
    targetHeight: 400,
    allowEdit: false
}

 this.camera.getPicture(options).then((imageData) => {
    this.cropService.crop(imageData, { quality: 100 }).then((newImage) => {
        this.profileImage = normalizeURL(newImage);
    }, (error) => {
        console.log("Error cropping image", error);
    });
}, (err) => {
    console.log('Error camera image', err);
});
}

1. пока я снимаю изображение с камеры, в это время он возвращает FILE_URI, LIKEэтот файл: ///storage/emulated/0/Android/data/com.exchangeconnect.sancial/cache/1536751062113-cropped.jpg? 1536751088363 ,
2. , но изображение не отображается в <img> тег

Answer 1

Попробуйте оставить свой исходный код и измените

saveToPhotoAlbum: false

на

saveToPhotoAlbum: true

Answer 2

Я изменил ваш код.Пожалуйста, найдите обновленный код ниже:

import { ViewController, Platform, normalizeURL } from 'ionic-angular';

openCamera() {
    let options = {
        quality: 100,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        saveToPhotoAlbum: false,
        targetWidth: 400,
        targetHeight: 400,
        allowEdit: false
    }

     this.camera.getPicture(options).then((imageData) => {
        this.cropService.crop(imageData, { quality: 100 }).then((newImage) => {
            if (this.platform.is('ios')){
                this.profileImage = normalizeURL(newImage);
            }else{
                this.profileImage= "data:image/jpeg;base64," + newImage;
            }
        }, (error) => {
            console.log("Error cropping image", error);
        });
    }, (err) => {
        console.log('Error camera image', err);
    });
}

или
Если вышеуказанное решение не работает, пожалуйста, попробуйте следующий код:

    import { ViewController, Platform, normalizeURL } from 'ionic-angular';

    openCamera() {
      let options = {
        quality: 100,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        saveToPhotoAlbum: false,
        targetWidth: 400,
        targetHeight: 400,
        allowEdit: false
    }

    this.camera.getPicture(options).then((imageData) => {
          // don't need to crop image for iOS platform as it is a in-build feature
          if (this.platform.is('ios')) {
            this.getFileUri(imageData);
          }else { // android platform, we need to do manually
            this.cropService.crop(imageData, { quality: 100 }).then(newImage => {
                this.getFileUri(newImage);
              },
              error => console.error('Error cropping image', error)
            );
         }
    }, (err) => {
        console.log('Error camera image', err);
    });
}

private getFileUri = (url: any) => {
    var scope = this;
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        scope.profileImage = reader.result;
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

Я думаю, что это связанок плагину "cordova-plugin-ionic-webview".Пожалуйста, следуйте инструкциям ниже, чтобы решить эту проблему:
1] удалить существующий плагин веб-просмотра

ionic cordova plugin rm cordova-plugin-ionic-webview

2] установить старую версию

ionic cordova plugin add cordova-plugin-ionic-webview@1.2.1

3] cleanCordova Android

ionic cordova clean android

Подробнее см. здесь https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/158