Angular中SVG字节数组绑定img标签不显示该如何解决？

问题原因 #

你操作中存在几个典型错误：

1. 使用Blob构造字节数组时未指定正确的MIME类型，浏览器无法识别二进制内容对应的图片格式
2. 直接拼接SVG字符串到DataURL时未对特殊字符做转义，#、%、<、>等字符会破坏DataURL的结构
3. 直接对字节数组使用btoa编码，btoa仅支持处理二进制字符串，无法直接处理Uint8Array类型的原始字节数组，会导致编码结果错误
4. 部分场景下未对最终赋值给src的DataURL做Angular安全消毒，会被Angular的安全拦截机制拦截

正确解决方案 #

场景1：this.location.qrCode是Uint8Array类型的SVG二进制字节数组

// 构造Blob时明确指定SVG对应的MIME类型
const blob = new Blob([this.location.qrCode], { type: 'image/svg+xml' });
const reader = new FileReader();
reader.onload = (e) => {
  // 对生成的完整DataURL做安全消毒后赋值
  this.src = this.sanitizer.bypassSecurityTrustResourceUrl(e.target.result as string);
};
reader.readAsDataURL(blob);

img标签无需修改：

<img [src]="src" />

场景2：this.location.qrCode是已解码的SVG纯字符串

优先使用转义后拼接的方式，性能更高：

// 转义SVG中的特殊字符
const encodedSvg = encodeURIComponent(this.location.qrCode);
this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml,${encodedSvg}`);

也可以使用base64编码方式：

// 处理特殊字符后再做base64编码，避免乱码
const base64Svg = btoa(unescape(encodeURIComponent(this.location.qrCode)));
this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml;base64,${base64Svg}`);

验证排查方式 #

你可以将生成的this.src内容直接复制到浏览器地址栏访问，如果无法正常打开，说明字节数组转DataURL的过程存在问题；如果可以正常打开，说明是Angular安全消毒步骤遗漏导致。

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