Що еквівалентно ngSrc у новій версії Angular?

Я хотів би реалізувати img, з src, що надходить від об'єкта JSON.

У AngularJS я міг зробити:

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

Чи є якийсь еквівалент цьому в Angular 2+?

AngularJS:

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

Кутова 2+:

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

Кутові документи

Зверніть увагу, що інтерполяція може досягти того самого результату:

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

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

Немає технічної різниці між цими двома твердженнями щодо прив'язки властивостей, якщо ви не бажаєте двостороннього прив'язки.

Інтерполяція є зручною альтернативою прив'язки властивостей у багатьох випадках. Насправді, Angular перекладає ці інтерполяції у відповідні прив'язки властивостей перед тим, як відтворити подання. джерело

Це двоступеневий процес для досягнення тієї ж функціональності ng-src у вашому додатку Angular.

Перший крок:

У своєму HTML використовуйте новий синтаксис:

<img [src]="imageSrc">

Другий крок:

У вашому компоненті / директиві ініціалізуйте значення порожнім . Наприклад:

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

Тепер це усуне nullвиклик мережі (порожній виклик) через те, що значення не встановлено для елемента.

Це також можна записати у формі інтерполяції, як:

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