Angular 6图片Base64转换管道出现unsafe标记的解决方法

遇到这个问题是因为Angular的DomSanitizer安全机制在起作用——它默认会标记所有未被明确信任的URL为unsafe，以此防范XSS攻击，你的Base64图片URL刚好被它判定为"不安全"的内容了。

要解决这个问题，只需要在你的管道中集成DomSanitizer，把生成的Base64图片URL标记为安全信任的即可，具体步骤如下：

1. 修改管道代码，引入并使用DomSanitizer #

首先更新你的管道文件，导入DomSanitizer和SafeUrl类型，注入实例后处理生成的URL：

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

@Pipe({
  name: 'base64Imag', // 你可以根据需要调整为更规范的`base64Image`
})
export class Base64ImagPipe implements PipeTransform {
  // 注入DomSanitizer实例
  constructor(private sanitizer: DomSanitizer) { }

  transform(value: any, args?: any): SafeUrl {
    if (typeof(value) !== 'undefined') {
      // 生成Base64编码内容
      const base64Encoded = BASE_LIBRARY_CODES.encode(value);
      // 拼接完整的data URI，注意替换为你实际的图片类型（比如image/png、image/jpeg）
      const imageDataUrl = `data:image/svg+xml;base64,${base64Encoded}`;
      // 标记该URL为安全信任的
      return this.sanitizer.bypassSecurityTrustUrl(imageDataUrl);
    } else {
      return '';
    }
  }
}

2. 关键注意事项 #

• 务必根据图片实际类型修改data:image/svg+xml部分：比如PNG图片用data:image/png，JPEG用data:image/jpeg，否则图片可能无法正常渲染。
• 返回SafeUrl类型而非普通字符串，能让Angular识别到这是经过安全验证的URL，不会再添加unsafe:前缀。
• 确认BASE_LIBRARY_CODES.encode方法能生成有效的Base64编码内容，如果编码本身有误，图片也会显示异常。

这样修改后，你的<img>标签的src就会变成正常的data:image/svg+xml;base64,xxx格式，不会再出现unsafe:前缀了。

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