在Ionic 3中显示本机相机拍摄的FILE_URI图像

问题描述

如何显示用户在Ionic 3中使用@ionic-native/camera拍摄的FILE_URI图像?

How do you display a FILE_URI image taken by the user using @ionic-native/camera in Ionic 3?

我可以使用Ionic Native的Camera获取FILE_URI图像URL，结果如下:

I can use Ionic Native's Camera to get a FILE_URI image URL, with a result like this:

file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg

但是，当我尝试通过引用视图模板中的URI向用户显示该图像时，该图像将永远不会加载.

However, When I try to display this image back to the user by referring to the URI in my view template, the image never loads.

我尝试过的事情:

-直接在视图中使用图像URI

-Using the image URI directly in the view

<img src="{{profile.image}}">    // Never loads

-通过在页面组件中包含DomSanitizer来清理URI:

-Sanitizing the URI by including DomSanitizer in the page component:

<img [src]="domSanitizer.bypassSecurityTrustUrl(profile.image)">    // Never loads

由于性能下降，我宁愿不使用base64图像.我在这里做错什么了?

I would rather not use a base64 image because of the performance drag. What am I doing wrong here?

推荐答案

从'ionic-angular'导入{normalizeURL}; ionic3< img>标记src

import { normalizeURL } from 'ionic-angular'; ionic3 <img> tag src

<img *ngIf="base64Image" src="{{base64Image}}"/>

 openCamera(pictureSourceType: any) {
  let options: CameraOptions = {
   quality: 95,
   destinationType: this.camera.DestinationType.FILE_URI,
   sourceType: pictureSourceType,
   encodingType: this.camera.EncodingType.PNG,
   targetWidth: 400,
   targetHeight: 400,
   saveToPhotoAlbum: true,
   correctOrientation: true
 };
 this.camera.getPicture(options).then(imageData => {
  if (this.platform.is('ios')) {
      this.base64Image = normalizeURL(imageData);
      // Alternatively if the problem only occurs in ios and normalizeURL
      // doesn't work for you then you can also use:
      // this.base64Image= imageData.replace(/^file:\/\//, '');
  }
  else {
      this.base64Image= "data:image/jpeg;base64," + imageData;
  }
 }, error => {
     console.log('ERROR -> ' + JSON.stringify(error));
   });
 }

这篇关于在Ionic 3中显示本机相机拍摄的FILE_URI图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！