Angular 14.2中NgOptimizedImage使用URL图片源失效问题求助

当然可以用NgOptimizedImage处理外部URL，问题出在默认的图像加载器是专为assets目录下的资源设计的，直接用外部URL需要先配置对应的加载器和安全规则，以下是具体实现步骤：

1. 配置自定义/远程图像加载器 #

你需要在应用的依赖注入配置中指定一个能处理外部URL的加载器，同时设置允许的域名（防止恶意资源加载）。

自定义基础加载器（适用于任意外部URL） #

如果不需要对URL做尺寸参数转换，直接返回原URL即可：

import { NgOptimizedImage, provideImageLoader } from '@angular/common';

// 自定义加载器函数
export function remoteImageLoader({ src }) {
  // 若你的图片服务支持按尺寸裁剪，可在这里拼接width/height参数，比如：
  // return `${src}?w=${width}&h=${height}`;
  return src;
}

// 在应用配置中注册（standalone项目用app.config.ts，NgModule用app.module.ts的providers数组）
export const appConfig: ApplicationConfig = {
  providers: [
    provideImageLoader(remoteImageLoader, {
      allowedDomains: ['your-image-domain.com', 'another-allowed-domain.com'] // 替换为你的图片域名
    })
  ]
};

用内置远程加载器（针对特定图床） #

如果你的图片托管在Cloudinary、Imgix这类支持动态尺寸的服务上，可以直接用Angular提供的内置加载器，比如Cloudinary的配置：

import { provideCloudinaryLoader } from '@angular/common';

providers: [
  provideCloudinaryLoader('your-cloud-name', {
    allowedDomains: ['res.cloudinary.com']
  })
]

2. 模板中正确使用ngSrc #

绑定外部URL时，必须指定width和height属性（除非使用fill模式），示例：

<!-- 直接绑定外部URL字符串 -->
<img [ngSrc]="'https://your-image-domain.com/path/to/image.jpg'" width="400" height="300" alt="外部图片">

<!-- 绑定组件中的变量 -->
<img [ngSrc]="imageUrlFromApi" width="400" height="300" alt="API返回的图片">

填充模式（无需手动设置宽高） #

如果需要让图片填充父容器，可以用fill属性，同时父容器要设置为相对定位：

<div style="position: relative; width: 100%; height: 300px;">
  <img [ngSrc]="imageUrlFromApi" fill alt="填充容器的图片">
</div>

3. 处理安全策略问题 #

如果遇到DOM安全报错，需要确保URL被标记为安全资源，或者在加载器配置中正确设置allowedDomains，Angular会自动处理允许域名内的资源安全问题。

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