DomSanitizer处理后SVG图片无法显示，SafeValue绑定错误排查

核心问题 #

你遇到的错误有两个关键原因：

1. 绑定方式错误：使用[attr.href]绑定SafeUrl时，Angular会将安全对象转换为字符串，触发安全校验报错——[attr.*]是HTML属性绑定，而非DOM属性绑定，无法识别SafeUrl的安全标记。
2. URL格式错误：Pipe中返回的url(blob:...)是CSS背景图的格式，但SVG <image> 元素的href需要直接指向资源URL，不需要额外用url()包裹。

修复步骤 #

1. 修正SecureUrlPipe的返回格式

去掉url()包裹，直接返回Blob URL的SafeUrl：

@Pipe({
    name: 'secureUrl'
})
export class SecureUrlPipe implements PipeTransform {
    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }
    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, {responseType: 'blob'})
            .pipe(map((blob) => {
                const blobUrl = URL.createObjectURL(blob);
                return this.sanitizer.bypassSecurityTrustUrl(blobUrl);
            }));
    }
}

2. 修改SVG的绑定方式

将[attr.href]替换为DOM属性绑定[href]，让Angular正确识别SafeUrl：

<svg style="width: 100%; height: 100%;">
  <image #cameraImage
         (load)="adjustImageSize()"
         (click)="clickOnImage($event)"
         [href]="imageUrl | secureUrl | async"></image>
</svg>

3. 可选：避免内存泄漏（重要）

Blob URL会占用浏览器内存，建议在组件销毁时主动释放：
在组件中订阅Pipe的结果，保存Blob URL并在销毁时回收：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { SecureUrlPipe } from './secure-url.pipe';
import { SafeUrl } from '@angular/platform-browser';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  imageUrl = '你的图片资源地址';
  private blobSub?: Subscription;
  safeImageUrl?: SafeUrl;

  constructor(private secureUrlPipe: SecureUrlPipe) {}

  ngOnInit() {
    this.blobSub = this.secureUrlPipe.transform(this.imageUrl).subscribe(url => {
      this.safeImageUrl = url;
    });
  }

  ngOnDestroy() {
    this.blobSub?.unsubscribe();
    // 回收Blob URL
    if (typeof this.safeImageUrl === 'string') {
      URL.revokeObjectURL(this.safeImageUrl);
    }
  }
}

对应的HTML修改为：

<svg style="width: 100%; height: 100%;">
  <image #cameraImage
         (load)="adjustImageSize()"
         (click)="clickOnImage($event)"
         [href]="safeImageUrl"></image>
</svg>

内容的提问来源于stack exchange，提问作者uday shankar sharma