我试图使图像文件显示在离子（Angular ）组件的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)

我已经使用了dom消毒剂，你可以看到在下面的ts文件，但它仍然不工作，我把代码在CHatGpt，它说一切都是正确的不知道这个错误的原因参考一些社区论坛，所以我在这里这是我的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.');
  }
}