Angular 15.x中ngSrc与ngSrcset使用NgOptimizedImage不符文档问题

问题描述 #

在Angular 15.x项目中使用NgOptimizedImage指令时，设置ngSrc和ngSrcset后，生成的srcset未按文档预期添加宽度查询参数：

输入代码：

<img ngSrc="hello.jpg" ngSrcset="100w, 200w" />

文档预期输出：

<img src="path/hello.jpg" srcset="path/hello.jpg?w=100 100w, path/hello.jpg?w=200 200w" />

实际输出：

<img src="path/hello.jpg" srcset="path/hello.jpg 100w, path/hello.jpg 200w" />

原因分析 #

NgOptimizedImage只有在**配置了图片加载器（Image Loader）**的前提下，才会自动为ngSrcset中的宽度值拼接对应的查询参数（如?w=xxx）。未配置加载器时，Angular仅处理图片路径补全，不会添加宽度参数。

解决办法 #

1. 使用官方预置的图片加载器 #

如果使用Cloudinary、Imgix等第三方图片服务，可直接导入对应加载器并配置：
以Imgix为例：

// app.config.ts（或app.module.ts，根据项目结构调整）
import { provideImgixLoader } from '@angular/common';

export const appConfig: ApplicationConfig = {
  providers: [
    provideImgixLoader('https://your-imgix-domain.com'),
    // 其他项目提供者
  ]
};

2. 自定义图片加载器 #

若使用自有后端处理图片缩放，可自定义加载器逻辑：

// app.config.ts
import { provideImageLoader } from '@angular/common';

export const appConfig: ApplicationConfig = {
  providers: [
    provideImageLoader((config) => {
      // 按后端要求拼接宽度参数
      return `${config.src}?w=${config.width}`;
    }),
    // 其他项目提供者
  ]
};

3. 验证效果 #

配置完成后重启项目，ngSrcset生成的srcset会自动带上宽度参数，与文档预期一致。

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