O que é equivalente a ngSrc no Angular mais recente?

Gostaria de implementar img, com um src vindo do objeto JSON.

No AngularJS, eu poderia fazer:

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

Existe algum equivalente a isso no Angular 2+?

AngularJS:

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

Angular 2+:

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

Angular docs

Observe que a interpolação pode alcançar o mesmo resultado:

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

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

Não há diferença técnica entre essas duas instruções para associação de propriedade, contanto que você não deseje associação bidirecional.

A interpolação é uma alternativa conveniente para vinculação de propriedade em muitos casos. Na verdade, o Angular converte essas interpolações nas associações de propriedade correspondentes antes de renderizar a vista. fonte

É um processo de duas etapas para obter a mesma funcionalidade do ng-src em seu aplicativo Angular.

Primeiro passo:

Em seu HTML, use a nova sintaxe:

<img [src]="imageSrc">

Segundo passo:

Em seu componente / diretiva, inicialize o valor como vazio . Por exemplo:

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

Agora, isso eliminaria a nullchamada de rede (chamada vazia) devido ao valor não ser definido para o elemento.

Também pode ser escrito na forma de interpolação como:

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