如何通过img标签展示服务器返回的Base64格式SVG图标？

问题根源是Angular的默认安全策略会拦截未标记为安全的动态资源URL，直接拼接的data:image/svg+xml;base64,...会被视为不安全资源，导致img显示破损。以下是纯字符串实现的正确方式：

步骤1：注入DomSanitizer服务 #

在组件中导入并注入Angular的DomSanitizer，用于标记资源URL为安全：

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  icon: string = "PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjEyNSAyLjc1TDMuODc1IDE2LjI1SDE0TDEyLjg3NSAyNS4yNUwyNC4xMjUgMTEuNzVIMTRMMTUuMTI1IDIuNzVaIiBzdHJva2U9IiM0NzU0NjciIHN0cm9rZS13aWR0aD0iMi4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";

  constructor(private sanitizer: DomSanitizer) {}
}

步骤2：修改解析方法，标记安全URL #

更新parseIcon方法，用bypassSecurityTrustResourceUrl处理生成的data URI：

parseIcon(icon: string): SafeResourceUrl {
  const dataUri = `data:image/svg+xml;base64,${icon}`;
  return this.sanitizer.bypassSecurityTrustResourceUrl(dataUri);
}

步骤3：保持原有模板不变 #

模板无需修改，直接使用处理后的安全URL：

<div class="cell cell--icon">
  <img [src]="parseIcon(icon)" />
</div>

为什么之前的DOMParser方法能生效？ #

直接通过DOMParser解析SVG并插入DOM的方式绕开了Angular的模板安全检查，但这种直接操作DOM的方式不符合Angular组件化规范，而使用DomSanitizer是官方推荐的安全处理方式。

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