Question

我试图在Ionic项目中显示图片库中的图片。

我用过：

Ionic 3
Angular 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">

获得的URL如下：

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

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

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

Answer 1

这取决于您的Ionic应用程序使用的渲染器。如果是UIWebView，那么为了让您的示例正常工作，您需要使用Sanitizer类。

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

这是必要的，因为Angular最好保护您免受XSS攻击，因此您需要明确告知角度您希望该图像从本地系统出现在那里。

如果您使用较新的WKWebView，则需要以不同的方式阅读路径，您可以在Ionic博客上的blog post中找到有关它的详细信息。简而言之：

import { normalizeURL } from 'ionic-angular';

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

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

1 个答案: