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

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 a-t-il un équivalent à cela dans Angular 2+?

AngularJS:

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

Angulaire 2+:

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

Documents angulaires

Notez que l'interpolation peut aboutir au même résultat:

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

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

Il n'y a aucune différence technique entre ces deux instructions pour la liaison de propriété, tant que vous ne souhaitez pas de liaison bidirectionnelle.

L'interpolation est une alternative pratique pour la liaison de propriété dans de nombreux cas. En fait, Angular traduit ces interpolations dans les liaisons de propriétés correspondantes avant de rendre la vue. la source

Il s'agit d'un processus en deux étapes pour obtenir les mêmes fonctionnalités que ng-src dans votre application Angular.

Premier pas:

Dans votre HTML, utilisez la nouvelle syntaxe:

<img [src]="imageSrc">

Deuxième étape:

Dans votre composant / directive, initialisez la valeur pour qu'elle soit vide . Par exemple:

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

Maintenant, cela éliminerait l' nullappel réseau (appel vide) car la valeur n'est pas définie sur l'élément.

Il peut également être écrit sous forme d'interpolation comme:

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

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