Ionic 3中如何显示@ionic-native/camera拍摄的FILE_URI图片？

这个问题我帮很多开发者踩过坑，核心原因是Ionic的WebView出于安全和兼容性考虑，默认不直接支持file://开头的本地文件路径。给你两个靠谱的解决方案，优先推荐第一个：

方案一：用Ionic File插件转换路径（推荐） #

这是最稳妥的方式，通过File插件的convertFileSrc()方法，把原生的file://路径转换成WebView能识别的内部路径。

步骤1：安装并配置File插件 #

先确保你已经安装了相关依赖：

# 安装cordova插件
ionic cordova plugin add cordova-plugin-file
# 安装Ionic Native包
npm install @ionic-native/file

然后在你的app.module.ts中导入并添加到Providers数组：

import { File } from '@ionic-native/file/ngx';

@NgModule({
  ...
  providers: [
    ...
    File,
    ...
  ]
})
export class AppModule {}

步骤2：在代码中转换路径 #

获取到相机返回的FILE_URI后，用convertFileSrc()处理：

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';

constructor(private camera: Camera, private file: File) {}

async captureProfilePhoto() {
  const options: CameraOptions = {
    quality: 80,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  };

  try {
    const imageUri = await this.camera.getPicture(options);
    // 关键：转换路径为WebView可访问格式
    this.profile.image = this.file.convertFileSrc(imageUri);
  } catch (err) {
    console.error('拍照失败：', err);
  }
}

步骤3：在模板中正常引用 #

现在直接在模板里使用转换后的路径即可：

<img [src]="profile.image" alt="个人头像" class="profile-img">

方案二：改用DATA_URL获取Base64编码（适合小图） #

如果只是小尺寸图片（比如头像），可以直接让相机返回Base64编码，这样不用处理路径问题，但大图片会占用更多内存，不推荐用于大图：

修改相机配置 #

把destinationType改成DATA_URL：

const options: CameraOptions = {
  quality: 80,
  destinationType: this.camera.DestinationType.DATA_URL, // 这里修改
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
};

模板中拼接Base64前缀 #

获取到返回值后，在模板里加上图片格式前缀：

<img [src]="'data:image/jpeg;base64,' + profile.image" alt="个人头像" class="profile-img">

额外注意事项 #

• 确保你已经在项目的配置文件中添加了相机和文件访问权限：
  • iOS：在info.plist中添加NSCameraUsageDescription和NSPhotoLibraryUsageDescription字段，说明权限用途
  • Android：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.CAMERA" />等相关权限

内容的提问来源于stack exchange，提问作者caitlin