Quel est l'équivalent de ngSrc dans le plus récent Angular?

Question

Je voudrais implémenter img, avec un src provenant d'un objet JSON.

Dans AngularJS, je pourrais faire:

 <img ng-src="{{hash}}" alt="Description" />
 

Y at-il un équivalent à ceci dans Angular 2+?

Answer 1

AngularJS:

<img ng-src="{{movie.imageurl}}">

Angulaire 2+:

<img [src]="movie.imageurl">

Angulaire docs

---

Notez que l'interpolation peut obtenir le même résultat:

<img src="{{vehicle.imageUrl}}">

<img [src]="vehicle.imageUrl">

Il n'y a pas de différence technique entre ces deux états de la propriété de liaison, aussi longtemps que vous n'avez pas envie de liaison bidirectionnelle.

L'Interpolation est une alternative pratique pour les biens de liaison dans de nombreux cas. En fait, Angulaire se traduit par ces interpolations dans le propriété correspondante fixations avant le rendu de la vue. source

Answer 2

Il s’agit d’un processus en deux étapes permettant d’obtenir la même fonctionnalité que ng-src dans votre application Angular.

Premier pas:

Dans votre code HTML, utilisez la nouvelle syntaxe:

<img [src]="imageSrc">

Deuxième étape:

Dans votre composant / directive, initialisez la valeur à vide . Par exemple:

 @Component({
  selector: 'ag-video',
  templateUrl: './video.component.html'
})
export class SampleComponent {
   imageSrc = '';
}
 

Maintenant, ceci éliminerait l'appel null réseau (appel vide) car la valeur n'est pas définie pour l'élément.

Answer 3

Il peut aussi être écrit sous la forme d’interpolation comme :

Answer 4

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
       10, currentPage: p , totalItems: count  }">

   <td>
    <img src="https://img.youtube.com/vi/{{post.youtubeVideoId}}/default.jpg">
   </td>

   <td>
     {{post.videoName}}
   </td>

</tr>