Có gì tương đương với ngSrc trong Angular mới hơn?

Tôi muốn triển khai img, với một src đến từ đối tượng JSON.

Trong AngularJS, tôi có thể làm:

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

Có cái nào tương đương với cái này trong Angular 2+ không?

AngularJS:

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

Góc 2+:

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

Tài liệu góc

Lưu ý rằng phép nội suy có thể đạt được kết quả tương tự:

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

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

Không có sự khác biệt kỹ thuật nào giữa hai câu lệnh này đối với ràng buộc tài sản, miễn là bạn không muốn ràng buộc hai chiều.

Nội suy là một sự thay thế thuận tiện cho việc ràng buộc tài sản trong nhiều trường hợp. Trên thực tế, Angular chuyển các nội suy đó thành các ràng buộc thuộc tính tương ứng trước khi hiển thị khung nhìn. nguồn

Đây là một quá trình gồm hai bước để đạt được chức năng tương tự của ng-src trong ứng dụng Angular của bạn.

Bước đầu tiên:

Trong HTML của bạn, hãy sử dụng cú pháp mới:

<img [src]="imageSrc">

Bước thứ hai:

Trong thành phần / chỉ thị của bạn, hãy khởi tạo giá trị để trống . Ví dụ:

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

Bây giờ, điều này sẽ loại bỏ nullcuộc gọi mạng (cuộc gọi trống) do giá trị không được đặt cho phần tử.

Nó cũng có thể được viết dưới dạng nội suy như:

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