使用ngSrc替代src后NgOptimizedImage无法加载图片的问题排查

你遇到的问题核心是未导入NgOptimizedImage模块——ngSrc是Angular官方提供的图片优化指令，属于NgOptimizedImage模块的一部分，不导入该模块的话，浏览器无法识别这个指令，自然不会加载图片。

解决方案 #

1. 针对独立组件（Standalone Component） #

在组件文件中导入NgOptimizedImage并添加到imports数组：

import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-your-component',
  standalone: true,
  imports: [NgOptimizedImage], // 必须添加这一行
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent { }

2. 针对NgModule模式 #

在对应的模块文件中导入NgOptimizedImage并添加到imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgOptimizedImage } from '@angular/common';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgOptimizedImage], // 必须添加这一行
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外说明 #

• 你的图片路径assets/imgs/konami.gif是正确的（只要assets文件夹在src目录下，Angular默认会打包该目录下的资源）。
• height="280"和width="498"的静态属性写法没有问题，不需要额外修改。
• ngSrc是Angular推荐的图片优化方案，会自动处理懒加载、资源优先级等优化逻辑，导入模块后即可正常生效。

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