Angular ngSrc 不接受动态值

Question

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

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

我有上面的代码。我想将动态值传递给 ngSrc 属性，但它不起作用。我是不是做错了什么？

Answer 1

你为什么不尝试使用属性绑定来

src

，似乎工作得很好。

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <ng-container *ngFor="let image of images">
      <img [src]="'assets/images/' + image" alt="My Image">
    </ng-container>
  `,
})
export class App {
  public images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
}

bootstrapApplication(App);

Stackblitz 演示