Angular中如何将SVG插入含#LOGO#占位符的字符串？

1. 修复SVG导入配置，实现正常导入使用 #

首先解决SVG导入的编译错误问题：

• 在项目src目录下创建svg.d.ts类型声明文件：

  declare module '*.svg' {
    const content: string;
    export default content;
  }
  

• 确保tsconfig.json的include字段包含该声明文件：

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]
  

• 检查angular.json的assets配置，保证SVG文件会被正确打包：

  {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "options": {
              "assets": [
                "src/favicon.ico",
                "src/assets",
                {
                  "glob": "*.svg",
                  "input": "src/assets",
                  "output": "/assets/"
                }
              ]
            }
          }
        }
      }
    }
  }
  

配置完成后，即可正常导入SVG并作为路径使用：

import logoSrc from '@src/assets/logo.svg';

// 组件内替换字符串
replaceLogo(content: string): string {
  return content.replace(/#LOGO#/g, `<img src="${logoSrc}" alt="Logo" />`);
}

此方案既解决了SVG导入问题，也能满足“SVG作为img源在其他地方使用”的需求。

2. 优化现有Pipe方案（符合Angular安全规范） #

你当前的Pipe方案可以通过DomSanitizer优化，避免安全风险：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'formatLogo' })
export class FormatLogoPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(source: string): SafeHtml {
    const replacedHtml = source.replace(/#LOGO#/g, `<img src="/assets/logo.svg" alt="Logo" />`);
    return this.sanitizer.bypassSecurityTrustHtml(replacedHtml);
  }
}

模板中使用：

<div [innerHtml]="serverContent | formatLogo"></div>

该方案将替换后的HTML标记为安全内容，符合Angular的安全机制，比直接使用innerHtml更规范。

3. 使用自定义指令处理DOM替换 #

创建指令封装替换逻辑，适合需要额外DOM操作的场景：

import { Directive, Input, ElementRef, OnInit, Renderer2 } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Directive({ selector: '[appReplaceLogo]' })
export class ReplaceLogoDirective implements OnInit {
  @Input() appReplaceLogo!: string;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    const safeHtml = this.sanitizer.bypassSecurityTrustHtml(
      this.appReplaceLogo.replace(/#LOGO#/g, `<img src="/assets/logo.svg" alt="Logo" />`)
    );
    this.el.nativeElement.innerHTML = safeHtml as string;
  }
}

模板中使用：

<div [appReplaceLogo]="serverContent"></div>

4. 协调后端直接替换标记（最优解） #

如果能和后端团队沟通，让服务器返回的字符串直接将#LOGO#替换为<img src="/assets/logo.svg" />，前端无需额外处理，直接绑定innerHtml即可，这是最简化的方案。

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