ionic 3: не удалось отобразить изображение с помощью плагина камеры

Question

Я пытаюсь загрузить изображение с помощью плагина камеры в ионном приложении, но изображение не отображается и не генерируется никаких ошибок.Вот код машинописного текста, который я использую для загрузки изображения:

import { ImagePicker } from '@ionic-native/image-picker/';

import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage implements OnInit {

    public imageUri: string = '';

  constructor(
    public toast: ToastController,
    public navCtrl: NavController,
    public navParams: NavParams,
    public storage: Storage,
    public platform: Platform,
    public transfer: FileTransfer,
    private camera: Camera,
    public imagePicker: ImagePicker
  ) {

  }

    upload() {


    const options: CameraOptions = {
      quality: 100,
      targetWidth: 800,
      correctOrientation: true,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }

    this.camera.getPicture(options).then((imageUri) => {
      this.imageUri = imageUri;
        this.toast.create({
        message: this.imageUri.toString(),
        closeButtonText: "Okay",
        dismissOnPageChange: true,
        showCloseButton: true
      }).present()
    }, (err) => {
      this.toast.create({
        message: err.toString(),
        closeButtonText: "Okay",
        dismissOnPageChange: true,
        showCloseButton: true
      }).present()
    });
 }

На html-стороне вот как я отображаю изображение:

 <div class="profile-picture">
    <div class="image">
       <img [src]="imageUri.replace('file://','')" *ngIf="imageUri !== ''">                    
    </div>
    <p (click)="upload()" tappable style="width: 100%;">load  profil picture</p>
  </div>

Поэтому, когда пользователь выбираетизображение, оно не отображается в представлении.Я использую cordova-plugin-ionic-webview ":" ^ 3.1.2

Заранее спасибо.

Answer 1

попробуйте что-то вроде этого.

html:

  <img src="{{imgUrl}}" (click)="pickImage()" id="image">

ts:

public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
   quality: 100,
   targetWidth: 80,
   targetHeight: 80,
   destinationType: this.camera.DestinationType.DATA_URL,
   sourceType: sourceType,
   correctOrientation: true
 };

// Get the data of an image
this.camera.getPicture(options).then((imagePath) => {
  this.prepareFile('data:image/jpeg;base64,' + imagePath);
}, (err) => {
  this.presentToast('Error while selecting image.');
})};



private prepareFile(namePath) {
 this.imgUrl = namePath;
}

sourceType равен this.camera.PictureSourceType.PHOTOLIBRARY или http://this.camera.PictureSourceType.CAMERA