Che cosa è equivalente a ngSrc nel più recente Angular?

Vorrei implementare img, con un src proveniente dall'oggetto JSON.

In AngularJS, potrei fare:

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

Esiste un equivalente a questo in Angular 2+?

AngularJS:

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

Angular 2+:

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

Documenti angolari

Si noti che l'interpolazione può ottenere lo stesso risultato:

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

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

Non vi è alcuna differenza tecnica tra queste due istruzioni per l'associazione di proprietà, a condizione che non si desideri l'associazione a due vie.

L'interpolazione è un'alternativa conveniente per l'associazione di proprietà in molti casi. In effetti, Angular traduce quelle interpolazioni nelle associazioni di proprietà corrispondenti prima di eseguire il rendering della vista. fonte

È un processo in due fasi per ottenere la stessa funzionalità di ng-src nella tua applicazione Angular.

Primo passo:

Nel tuo HTML, usa la nuova sintassi:

<img [src]="imageSrc">

Secondo passo:

Nel tuo componente / direttiva, inizializza il valore in modo che sia vuoto . Per esempio:

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

Ora, questo eliminerebbe la nullchiamata di rete (chiamata vuota) a causa del valore non impostato sull'elemento.

Può anche essere scritto in forma di interpolazione come:

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