web-dev-qa-db-fra.com

Impossible d'utiliser img ng-src (impossible de se connecter à ng-src car ce n'est pas une propriété connue de img)

J'ai un projet Angular avec Webpack et j'essaie d'utiliser une balise img avec ng-src, conformément à la documentation Angular:

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

J'essaie d'avoir une variable dans l'image source comme ceci:

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

Cependant, lorsque j'exécute ng serve, les erreurs suivantes apparaissent dans la console du navigateur:

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

J'ai cherché sur Google et trouvé d'autres utilisateurs de ng-src sans problèmes avec Angular + Webpack. Je ne sais donc pas pourquoi cela ne fonctionne pas dans ce projet. Je vous remercie.

angularangular2-formsangular2-directives
4
Seth

Vous pouvez utiliser l’entrée [attr.src] pour établir une liaison avec les propriétés HTML natives.

Dans votre fichier Component.ts

Disons que vous avez une liste d'éléments de type ListItem, la classe ListItem devra exposer une propriété imagePath. Ainsi

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

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

Dans votre modèle 

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

J'espère que cela t'aides!

10
Daniel Ormeño

Ce qui a fonctionné pour moi, c’est l’utilisation de src. Exemple: 

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