无法使用img ng-src(无法绑定到ng-src,因为它不是img的已知属性)

时间:2017-05-10 02:16:20

标签: angular angular2-forms angular2-directives

我有一个使用Webpack的Angular项目,我正在尝试使用带有ng-src的img标签,根据Angular文档:

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

我试图在图像源中有一个变量,如下所示:

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

但是,当我运行服务时,我在浏览器控制台中收到以下错误:

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

我已经使用Google搜索并发现其他人使用ng-src时没有使用Angular + Webpack,所以我不确定为什么它不能在这个项目中工作。谢谢。

2 个答案:

答案 0 :(得分:13)

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

在component.ts文件中

假设您有ListItem类型的项目列表,ListItem类需要公开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>

希望这有帮助!

答案 1 :(得分:1)

对我有用的是使用src。 示例:

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