Ionic 3 Native File图片查看异常：安卓外部根目录图片无法显示

嘿，我刚踩过类似的坑，这几个关键点应该能帮你搞定：

1. 先修正HTML里的图片绑定语法 #

你现在用的data-ng-src是AngularJS的写法，Ionic 3基于Angular框架，得用Angular标准的属性绑定语法[src]，不然Angular没法正确解析图片路径：

<ion-list>
  <ion-item *ngFor="let status of user_statuses" (click)="showDetails(status)">
    <ion-thumbnail item-start>
      <img [src]="status.nativeURL" alt="{{status.name}}">
    </ion-thumbnail>
    <h2>{{status.name}}</h2>
  </ion-item>
</ion-list>

2. 转换原生路径为WebView可访问格式 #

安卓的外部存储file://路径，Ionic的WebView出于安全和兼容性考虑，是没法直接加载的，得用@ionic-native/ionic-webview提供的convertFileSrc()方法把路径转成WebView能识别的格式。

首先在页面组件里导入依赖：

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

然后修改goToDir方法，处理文件路径：

goToDir() {
  // 安卓外部根目录路径
  const externalRoot = this.file.externalRootDirectory;
  this.file.listDir(externalRoot, '')
    .then(files => {
      // 过滤出图片文件，转换路径
      this.user_statuses = files
        .filter(file => file.isFile && /\.(jpg|jpeg|png|gif)$/i.test(file.name))
        .map(file => ({
          name: file.name,
          nativeURL: this.webView.convertFileSrc(file.nativeURL)
        }));
    })
    .catch(error => {
      console.error('读取目录失败:', error);
    });
}

3. 配置安卓权限和存储兼容 #

安卓10及以上引入了Scoped Storage机制，默认会限制App对外部根目录的访问，得在config.xml里做两个关键配置：

<!-- 添加读取外部存储权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<platform name="android">
  <!-- 开启旧存储模式兼容，让App能访问外部根目录 -->
  <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:requestLegacyExternalStorage="true" />
  </edit-config>
</platform>

问题根源总结 #

• 错误使用了AngularJS的绑定语法，Angular无法正确识别并加载图片；
• WebView不能直接访问原生file://路径，必须转换为兼容格式；
• 安卓新版本的存储权限限制，导致App无法读取外部根目录的文件。

按照上面的步骤改完，应该就能正常显示外部根目录的图片了！

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