Angular 如何在Ionic 3中显示库中的图片

我试图在爱奥尼亚项目中显示一张来自图书馆的图片

我用过：

• 离子3
• 角度4
• iOS仿真器

在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);
        });

在HTML中：

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

在控制台中，出现以下错误：

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

---

这取决于与您的Ionic应用程序一起使用的渲染器。如果它是

UIWebView

，那么为了使示例正常工作，您需要使用

Sanitizer

类

从'@angular/platform browser'导入{domsanizer}；
// ....
构造函数（私有sanitizer:DomSanitizer）{}
// ...
这个.camera.getPicture（选项）。然后（imageUri=>{
this.selectedPictureUri=this.sanitizer.bypassSecurityTrustUrl（imageUri）；
}).catch（控制台错误）；

这是必需的，因为Angular尽最大努力保护您免受XSS攻击，所以您需要明确地告诉Angular您希望该图像从本地系统显示在那里

如果您使用较新的WKWebView，您需要以不同的方式阅读路径，您可以在爱奥尼亚博客上的关于它的内容中找到详细信息。简言之：

从“离子角度”导入{normalizeURL}；
//而不是
this.selectedPictureUri=imageUri；
//你需要使用
this.selectedPictureUri=normalizeURL（imageUri）；

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