Angular ngSrc无法接收动态值？代码实现遇阻求排查

你的写法存在Angular构建机制导致的路径解析问题，直接动态拼接assets路径会让Angular无法正确识别静态资源，以下是两种可行的修复方案：

方案1：直接定义完整资源路径 #

把图片的完整路径提前写在数组里，避免模板里动态拼接：

public images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

模板简化为：

<ng-container *ngFor="let image of images">
  <img [ngSrc]="image" alt="My Image">
</ng-container>

方案2：使用Angular 17+的resolveAssetUrl函数 #

如果你的项目是Angular 17及以上版本，可以用官方提供的资源解析函数来处理动态路径：

1. 先在组件里导入函数：

import { resolveAssetUrl } from '@angular/core';

2. 模板里调用函数生成正确路径：

<ng-container *ngFor="let image of images">
  <img [ngSrc]="resolveAssetUrl('assets/images/' + image)" alt="My Image">
</ng-container>

原因说明 #

Angular构建时会对assets目录下的资源做优化处理（比如添加哈希后缀），动态拼接的路径无法被构建工具提前识别，导致编译后找不到对应资源，所以ngSrc加载失败。

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