离子 - 将图像源设置为FILE_URI生成:不允许加载本地资源错误

Question

我现在正在使用Android，并使用Ionic开发我的应用程序。当用户拍摄照片时，我会将其附加到离子幻灯片元素中的离子载玻片上。但是，我不断收到"不允许加载本地资源错误"。设置所有权限(保存图像(

.HTML：

<ion-slide *ngFor="let looImage of looImages">
<img src="{{ looImage }}" imageViewer ion-long-press
(onPressing)="showImageOptions()"/>
</ion-slide>

TS：

options: CameraOptions = {
correctOrientation: true,
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
capturePhoto() {
this.camera.getPicture(this.options).then((imageData) => {
this.looImages.push(imageData);
console.log(this.looImages.length);
}, (err) => {
});
}

完全错误：

不允许加载本地资源：file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1538074314258.jpg

Answer 1

它是移动设备中的安全层，拒绝从Web视图加载图像。您可以使用"DATA_URL"返回 base64 内容。您可以通过追加内容类型并应用 DomSanitizer 服务来附加到 src 属性。

如果您仍然想使用 FILE_URI，请使用 ionic-native/file 插件 https://ionicframework.com/docs/native/file/，您可以将图像移动到应用程序数据目录中，您可以从那里访问。