Что эквивалентно 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">

Angular документы

Обратите внимание, что интерполяция может дать тот же результат:

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