Ionic(Angular)图片经Dom Sanitizer处理后无法预览求助

我在基于Ionic(Angular)搭建的社交平台中，需要在前端展示用户从设备选择的图片预览。目前已成功获取图片并转为File格式用于后端处理，但使用<ion-img>展示时遇到了安全绑定错误。

前端代码与错误信息 #

HTML代码（addpost.html） #

<ion-img [src]="imageSrc" *ngIf="imageSrc"></ion-img>

控制台错误日志 #

SafeValue%20must%20use%20[property]=binding:%20blob:http://localhost:8100/d4a16d48-5b86-47e9-86a4-dcfb9096b236%20(see%20https://g.co/ng/security#xss):1     GET http://localhost:8100/SafeValue%20must%20use%20[property]=binding:%20blob:http://localhost:8100/d4a16d48-5b86-47e9-86a4-dcfb9096b236%20(see%20https://g.co/ng/security 404 (Not Found)

已尝试的TypeScript代码（addpost.ts） #

import { Component, OnInit } from '@angular/core';
import { NavController, ToastController } from '@ionic/angular';
import { Camera, CameraResultType, CameraSource,Photo } from '@capacitor/camera';
import { PostService } from '../services/post.service';
import { HttpErrorResponse } from '@angular/common/http';
import { ActionSheetController } from '@ionic/angular';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.scss'],
})
export class AddPostComponent  implements OnInit {

  selectedImage: any = null;
  imageSrc: SafeUrl | undefined;
  image:any;
  constructor(private navCtrl: NavController, private toastController: ToastController, private postService: PostService
    ,private actionSheetController:ActionSheetController,private sanitizer:DomSanitizer) { }
  


  ngOnInit() {}




  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Choose Source',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            this.takePhoto();
          },
        },
        {
          text: 'Choose from Gallery',
          icon: 'images',
          handler: () => {
            this.chooseFromGallery();
          },
        },
        {
          text: 'Cancel',
          role: 'cancel',
        },
      ],
    });

    await actionSheet.present();
  }
  async takePhoto() {
    console.log('Taking photo...');
    const image = await Camera.getPhoto({
      quality: 100,
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
    });
    
    const imageFile = await this.createFileFromPhoto(image);
    this.processImage(imageFile);
  }

  async chooseFromGallery() {
    console.log('Choosing from gallery...');
    const image = await Camera.getPhoto({
      quality: 100,
      resultType: CameraResultType.Uri,
      source: CameraSource.Photos,
    });

    const imageFile = await this.createFileFromPhoto(image);
    this.processImage(imageFile);
  }

  async createFileFromPhoto(photo: Photo): Promise<File> {
    console.log('Creating file from photo...');
    const response = await fetch(photo.webPath!);
    const blob = await response.blob();

    // Create a File instance from the Blob
    const imageFile = new File([blob], 'image.jpg', { type: 'image/jpeg' });
    return imageFile;
  }

  async processImage(imageFile: File) {
    console.log('Processing image...');
    this.selectedImage = imageFile;
    const blobUrl = URL.createObjectURL(imageFile);
    this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(blobUrl);
    console.log('Image processed and displayed.');
    console.log('Image processed and sanitized.');
  }
}

解决方案 #

方案1：直接使用Capacitor返回的webPath（推荐） #

Capacitor Camera获取的photo.webPath本身就是可以直接在前端使用的本地URL，不需要额外转成File再生成Blob URL，这样能直接绕过Sanitizer的绑定问题，同时保留File对象用于后端上传：

修改takePhoto和chooseFromGallery方法：

async takePhoto() {
  console.log('Taking photo...');
  const image = await Camera.getPhoto({
    quality: 100,
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
  });
  
  // 直接使用webPath并做安全处理
  this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(image.webPath!);
  // 同时生成File对象用于后端上传
  const imageFile = await this.createFileFromPhoto(image);
  this.selectedImage = imageFile;
}

async chooseFromGallery() {
  console.log('Choosing from gallery...');
  const image = await Camera.getPhoto({
    quality: 100,
    resultType: CameraResultType.Uri,
    source: CameraSource.Photos,
  });

  this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(image.webPath!);
  const imageFile = await this.createFileFromPhoto(image);
  this.selectedImage = imageFile;
}

之后可以删除原来的processImage方法，逻辑更简洁高效。

方案2：修复Blob URL的绑定问题 #

如果坚持要使用Blob URL，可将Sanitizer处理后的SafeUrl转为字符串再赋值：

async processImage(imageFile: File) {
  console.log('Processing image...');
  this.selectedImage = imageFile;
  const blobUrl = URL.createObjectURL(imageFile);
  // 转换为字符串类型
  this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(blobUrl) as string;
}

额外优化：避免内存泄漏 #

不管用哪种方案，记得在组件销毁时释放Blob URL资源：

import { OnDestroy } from '@angular/core';

// 实现OnDestroy接口
export class AddPostComponent  implements OnInit, OnDestroy {

  // ... 原有代码 ...

  ngOnDestroy() {
    if (this.imageSrc) {
      const url = this.imageSrc as string;
      if (url.startsWith('blob:')) {
        URL.revokeObjectURL(url);
      }
    }
  }
}

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