web-dev-qa-db-ja.com

img ng-srcを使用できません（imgの既知のプロパティではないため、ng-srcにバインドできません）

私はWebpackでAngularプロジェクトを持っており、Angular docs here：に従って、ng-srcでimgタグを使用しようとしています：

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'.

私はグーグルで検索し、Angular + Webpackで問題なくng-srcを使用している他の人を見つけたので、なぜこのプロジェクトで機能しないのかわかりません。ありがとうございます。

angularangular2-formsangular2-directives
5
Seth

[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>

お役に立てれば！

14
Daniel Ormeño

私のために働いたのは、srcだけを使用することでした。例：

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