ionic-framework - 在 Ionic 3 中显示由 Native Camera 拍摄的 FILE_URI 图像

Question

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

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

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

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

我试过的东西:

- 直接在 View 中使用图像 URI

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

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

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

由于性能拖累，我宁愿不使用 base64 图像。我在这里做错了什么？

Answer 1

从“ ionic 角”导入 { normalizeURL }; 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));
   });
 }