Ionic页面无法显示图片：设置img src为FILE_URI后报错页面崩溃

我来帮你搞定这个Ionic里本地图片加载的坑！你遇到的报错，本质上是Angular/Ionic的安全机制在起作用——它默认会阻止直接加载file://协议的资源，毕竟这类本地路径存在安全风险。下面给你几个亲测有效的解决方案：

1. 用Angular的DomSanitizer绕过安全检查 #

这是最直接的方法，把你的file://路径标记为“安全资源”，让Angular允许加载它：

首先在组件里导入DomSanitizer：

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-image-display',
  templateUrl: './image-display.page.html',
  styleUrls: ['./image-display.page.scss'],
})
export class ImageDisplayPage {
  cameraImageURI: string = 'file:///var/mobile/Containers/Data/Application/2A696490-1D2B-4A22-B058-8F814AF52D90/tmp/cdv_photo_001.jpg';
  networkImageURI: string = 'file:///var/mobile/Containers/Data/Application/2A696490-1D2B-4A22-B058-8F814AF52D90/Documents/file.png';

  constructor(private sanitizer: DomSanitizer) {}

  // 把原始URI转为安全的资源URL
  getSafeImageUrl(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

然后在模板里调用这个方法绑定src：

<img [src]="getSafeImageUrl(cameraImageURI)" alt="相机拍摄图片">
<img [src]="getSafeImageUrl(networkImageURI)" alt="本地存储的网络图片">

2. 把本地文件转成Base64格式展示 #

如果第一种方法还是不行，那就换个思路——把本地文件读取成Base64编码的字符串，这种格式完全不受协议限制：

// 新增一个方法转换文件为Base64
convertFileToBase64(fileUri: string): Promise<string> {
  return new Promise((resolve, reject) => {
    // 解析本地文件路径
    window.resolveLocalFileSystemURL(fileUri, (fileEntry) => {
      fileEntry.file((file) => {
        const reader = new FileReader();
        // 读取完成后返回Base64字符串
        reader.onloadend = () => {
          resolve(reader.result as string);
        };
        reader.onerror = (error) => reject(error);
        reader.readAsDataURL(file);
      }, (error) => reject(error));
    }, (error) => reject(error));
  });
}

// 在页面初始化或者获取到图片URI后调用
async ngOnInit() {
  this.safeCameraImage = await this.convertFileToBase64(this.cameraImageURI);
  this.safeNetworkImage = await this.convertFileToBase64(this.networkImageURI);
}

模板里直接绑定转换后的Base64字符串：

<img [src]="safeCameraImage" alt="相机拍摄图片">
<img [src]="safeNetworkImage" alt="本地存储的网络图片">

3. 检查并配置文件访问权限 #

最后别忘了确认你的项目权限配置是否正确：

• 在config.xml里添加本地文件访问权限：

  <access origin="file://*" />
  <allow-navigation href="file://*" />
  

• iOS平台需要在info.plist里添加相机和相册的权限描述（否则可能连文件都无法保存）：

  <key>NSCameraUsageDescription</key>
  <string>需要访问相机拍摄图片</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册保存/读取图片</string>
  

另外补充一下：你之前尝试的normalizeURL把路径转成http://localhost的方式是不对的，因为那是把本地文件路径当成了服务器静态资源路径，而你的本地文件并不在Ionic dev server的目录下，所以肯定加载失败。FileOpener是用来调用系统应用打开文件的，不是用来在网页里展示图片的，确实不适用这个场景。

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