Ionic3-Cordova+Angular6下Android图库图片无法在img标签显示求助

我之前也碰到过这个一模一样的问题，折腾了好几天才搞定，结合你的环境（Ionic CLI 3.20.0、Cordova CLI 8.0.0、Angular 6.0.1、Ionic Framework 3.9.2），给你分享下验证可行的步骤：

核心问题根源 #

Android的content://格式URI是系统级的内容定位符，WebView无法直接识别加载；单纯靠DomSanitizer或者cdvfile配置，容易因为权限、路径解析问题踩坑，最稳妥的方式是把图片转成Base64格式绑定，或者先把content://转成WebView可识别的file://路径再处理。

步骤1：安装必要的插件 #

确保你安装了这三个插件，用来处理文件选择、路径转换和文件操作：

cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-filechooser
cordova plugin add cordova-plugin-filepath

• cordova-plugin-filepath是关键：它能把Android的content:// URI转成真实的file://文件路径，解决resolveLocalFilesystemUrl的不安全URI报错问题。

步骤2：组件代码实现 #

在你的页面组件中，按以下流程处理图片选择和转换：

导入依赖 #

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { FileChooser } from '@ionic-native/file-chooser';
import { FilePath } from '@ionic-native/file-path';
import { File, FileEntry } from '@ionic-native/file';

核心逻辑 #

export class YourImagePage {
  imageSrc: SafeResourceUrl; // 用来绑定到img的src

  constructor(
    private fileChooser: FileChooser,
    private filePath: FilePath,
    private file: File,
    private domSanitizer: DomSanitizer
  ) {}

  // 选择图片的方法
  selectGalleryImage() {
    this.fileChooser.open()
      .then(contentUri => {
        // 第一步：把content://转成file://路径
        return this.filePath.resolveNativePath(contentUri);
      })
      .then(filePath => {
        // 第二步：解析文件路径获取FileEntry
        return this.file.resolveLocalFilesystemUrl(filePath);
      })
      .then(entry => {
        // 第三步：确认是文件后获取File对象
        if (entry.isFile) {
          return (entry as FileEntry).file();
        }
        throw new Error('选中的不是有效文件');
      })
      .then(file => {
        // 第四步：将文件转成Base64格式
        const reader = new FileReader();
        reader.onloadend = () => {
          // 用DomSanitizer标记为安全资源
          this.imageSrc = this.domSanitizer.bypassSecurityTrustUrl(reader.result as string);
        };
        reader.readAsDataURL(file);
      })
      .catch(error => {
        console.error('处理图片出错:', error);
      });
  }
}

步骤3：模板绑定 #

在页面的HTML模板中，直接绑定处理后的imageSrc：

<ion-content padding>
  <button ion-button (click)="selectGalleryImage()">选择图库图片</button>
  <img *ngIf="imageSrc" [src]="imageSrc" alt="选中的图片" style="max-width: 100%;" />
</ion-content>

步骤4：配置CSP和权限 #

1. 内容安全策略（CSP） #

在index.html的<head>中更新CSP，允许Base64、文件路径等资源加载：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: file: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: cdvfile: file: content:;">

2. Android权限配置 #

在config.xml中添加读取外部存储的权限，确保能访问图库文件：

<platform name="android">
  <config-file parent="/manifest" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  </config-file>
</platform>

为什么之前的方法失效？ #

• 直接绑定content:// URI：WebView不支持加载Android系统的内容URI，必须转成WebView可识别的格式
• 仅用resolveLocalFilesystemUrl处理content://：未转成file://路径会触发"不安全URI"报错，因为Cordova的file插件对content://的解析需要额外处理
• 依赖cdvfile：虽然可行，但容易因为设备存储路径差异、权限问题导致加载失败，Base64是更通用的解决方案

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