无法使用 img ng-src（无法绑定到 ng-src，因为它不是 img 的已知 属性）

Question

我有一个带有 Webpack 的 Angular 项目，并且我正在尝试将 img 标签与 ng-src 一起使用，根据此处的 Angular 文档：

https://docs.angularjs.org/api/ng/directive/ngSrc

我正在尝试在图像源中添加一个变量，如下所示：

<img ng-src="assets/images/{{row.imagePath}}.png" width="1" height="1" />

但是，当我 运行 ng serve 时，我在浏览器控制台中收到以下错误：

zone.js:569 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ng-src' since it isn't a known property of 'img'.

我用谷歌搜索发现其他人使用 ng-src 时 Angular + Webpack 没有问题，所以我不确定为什么它在这个项目中不起作用。谢谢。

Answer 1

您可以使用 [attr.src] 输入绑定到本机 html 属性。

在您的 component.ts 文件中

假设您有一个 ListItem 类型的项目列表，ListItem class 需要公开一个 imagePath 属性。像这样

export class ListItem {
    public imagePath: string;
    // ....
}

@Component({
  templateUrl: './your/template/example.html',
})
export class YourComponent {
    listItems: ListItem[];
    //...
}

在您的模板中

<div *ngFor="item in listItems">
    <img [attr.src]="item.imagePath" width="1" height="1" />
</div>

希望对您有所帮助！

Answer 2

对我有用的是只使用 src。 示例：

    <td><img src="assets/{{elemento.foto}}" alt="(sin foto!)" class="img-responsive"/></td>