清理后无法显示图像

Question

我正在尝试使图像文件显示在离子（角度）组件的 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 sanitizer，正如您在下面的 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.');
  }
}

Answer 1

看来您正确使用了 DomSanitizer，但我认为您应该使用

bypassSecurityTrustResourceUrl

而不是

bypassSecurityTrustUrl

替换此行：

this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(blobUrl);

与：

this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(blobUrl);

bypassSecurityTrustResourceUrl

设计用于绑定将加载和显示整个资源（例如图像、iframe 等）的值，而

bypassSecurityTrustUrl

更适合导航链接或类似内容。前者比后者更宽容。