So zeigen Sie ein Bild aus der Bibliothek in Ionic 3 an

Question

Ich habe versucht, ein Bild aus der Bibliothek in Ionic Projekt anzuzeigen.

I verwendet:

• Ionic 3
• Angular 4
• iOS-Emulator

In Comopent:

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

    this.camera.getPicture(options) 
     .then(imageUri => { 
      console.log(imageUri); 
      this.selectedPictureUri = imageUri; 
     }) 
     .catch(error => { 
      console.error(error); 
     }); 

In HTML:

<img *ngIf="selectedPictureUri" [src]="selectedPictureUri"> 

Die URL erhalten werden, sind die folgenden:

file:///Users/...692F7E7A4086/tmp/cdv_photo_015.jpg 

In Konsole folgenden Fehler auf:

Not allowed to load local resource: file:///Users/...692F7E7A4086/tmp/cdv_photo_015.jpg 

Answer 1

Es auf dem Renderer mit Ionic App verwendet wird, hängt. Wenn es UIWebView ist, um Ihr Beispiel zu arbeiten, müssen Sie die Sanitizer Klasse verwenden.

import { DomSanitizer } from '@angular/platform-browser'; 

// .... 

constructor(private sanitizer: DomSanitizer) { } 

// ... 

this.camera.getPicture(options).then(imageUri => { 
    this.selectedPictureUri = this.sanitizer.bypassSecurityTrustUrl(imageUri); 
}).catch(console.error); 

Dies ist notwendig, da Angular tut es am besten, die Sie von XSS-Angriffen zu schützen, so müssen Sie explizit Winkel sagen, dass Sie das Bild wollen aus dem lokalen System, dort erscheinen.

Wenn Sie das neuere WKWebView verwenden, müssen Sie Ihre Pfade anders lesen, finden Sie die Details in der blog post darüber auf dem Ionic Blog. Kurz gesagt:

import { normalizeURL } from 'ionic-angular'; 

// instead of 
this.selectedPictureUri = imageUri; 
// you need to use 
this.selectedPictureUri = normalizeURL(imageUri);