Apa yang setara dengan ngSrc di Angular yang lebih baru?

Saya ingin mengimplementasikan img, dengan src berasal dari objek JSON.

Di AngularJS, saya bisa melakukan:

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

Apakah ada yang setara dengan ini di Angular 2+?

AngularJS:

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

Angular 2+:

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

Dokumen Angular

Perhatikan bahwa interpolasi dapat mencapai hasil yang sama:

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

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

Tidak ada perbedaan teknis antara kedua pernyataan ini untuk pengikatan properti, selama Anda tidak menginginkan pengikatan dua arah.

Interpolasi adalah alternatif yang nyaman untuk pengikatan properti dalam banyak kasus. Faktanya, Angular menerjemahkan interpolasi tersebut ke dalam pengikatan properti yang sesuai sebelum merender tampilan. sumber

Ini adalah proses dua langkah untuk mencapai fungsionalitas ng-src yang sama di aplikasi Angular Anda.

Langkah pertama:

Di HTML Anda, gunakan sintaks baru:

<img [src]="imageSrc">

Tahap kedua:

Di komponen / direktif Anda, inisialisasi nilainya menjadi kosong . Sebagai contoh:

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

Sekarang, ini akan menghilangkan nullpanggilan jaringan (panggilan kosong) karena nilai tidak disetel ke elemen.

Dapat juga ditulis dalam bentuk interpolasi seperti:

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