NgOptimizedImage的ngSrc不支持Base64/Blob URL，求兼容方案

问题场景 #

尝试在<img>标签上使用NgOptimizedImage指令，将ngSrc绑定为用户上传图片的Base64编码或Blob URL时，均触发NG02952错误，提示该指令不支持这两种格式。原生src属性使用完全正常，但IDE提示ngSrc可提升性能，因此想了解：

• ngSrc除本地/远程文件路径外还支持哪些格式？
• 如何编写符合规范的图片预览逻辑以兼容该指令？
• 为什么会存在这些格式限制的断言？

代码示例 #

HTML代码 #

<img
  [ngSrc]="src"
  alt="Uploaded Image"
  width="500"
  height="500"
/>

Base64方式代码及报错 #

TypeScript代码：

async previewImage(file: File) {
  const reader = new FileReader();
  reader.onload = (e: ProgressEvent<FileReader>) => {
    if (e.target && e.target.result) {
      console.log(e.target.result);
      this.imageSrc$.next(e.target.result);
    }
  };
  reader.readAsDataURL(file);
}

报错信息：

NG02952: The NgOptimizedImage directive has detected that ngSrc is a Base64-encoded string (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0oA...). NgOptimizedImage does not support Base64-encoded strings. To fix this, disable the NgOptimizedImage directive for this element by removing ngSrc and using a standard src attribute instead.

Blob方式代码及报错 #

TypeScript代码：

async previewImage(file: File) {
  this.imageSrc$.next(URL.createObjectURL(file));
}

报错信息：

NG02952: The NgOptimizedImage directive has detected that ngSrc was set to a blob URL (blob:http://local_ip/9ed9c356-4066-4447-bc02-af3905be3dcb). Blob URLs are not supported by the NgOptimizedImage directive. To fix this, disable the NgOptimizedImage directive for this element by removing ngSrc and using a regular src attribute instead.

问题解答 #

1. ngSrc支持的格式范围 #

NgOptimizedImage的ngSrc仅支持绝对/相对路径的本地静态文件或HTTP/HTTPS协议的远程图片URL，明确不支持data:开头的Base64编码字符串和blob:开头的临时URL。

2. 符合规范的图片预览逻辑 #

用户上传图片的预览场景，本质是加载客户端本地文件，完全不需要NgOptimizedImage提供的图片优化能力（比如懒加载、自动格式转换、CDN适配等）。正确的做法是直接使用原生src属性：

<img
  [src]="src"
  alt="Uploaded Image"
  width="500"
  height="500"
/>

IDE的性能提示仅适用于远程/本地静态图片的场景，对客户端生成的预览图不适用，可以忽略该提示。

3. 格式限制断言的原因 #

从相关代码提交可以看出，这些断言是为了确保NgOptimizedImage只处理它能优化的图片类型：

• Base64编码的图片已经加载到客户端内存中，不需要懒加载、占位符等优化策略；
• Blob URL是临时生成的本地URL，不存在网络加载的性能问题，也不需要该指令的优化逻辑。
  添加这些限制是为了避免无效的优化处理，防止开发者误用指令到不适合的场景中。

内容的提问来源于stack exchange，提问作者fyodor-the-ignorant