¿Qué es equivalente a ngSrc en el Angular más nuevo?

Me gustaría implementar img, con un src proveniente del objeto JSON.

En AngularJS, podría hacer:

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

¿Hay algún equivalente a esto en Angular 2+?

AngularJS:

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

Angular 2+:

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

Documentos angulares

Tenga en cuenta que la interpolación puede lograr el mismo resultado:

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

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

No hay diferencia técnica entre estas dos declaraciones para la vinculación de propiedad, siempre y cuando no desee una vinculación bidireccional.

La interpolación es una alternativa conveniente para la vinculación de propiedades en muchos casos. De hecho, Angular traduce esas interpolaciones en los enlaces de propiedad correspondientes antes de renderizar la vista. fuente

Es un proceso de dos pasos para lograr la misma funcionalidad de ng-src en su aplicación Angular.

Primer paso:

En su HTML, use la nueva sintaxis:

<img [src]="imageSrc">

Segundo paso:

En su componente / directiva, inicialice el valor para que esté vacío . Por ejemplo:

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

Ahora, esto eliminaría la nullllamada de red (llamada vacía) debido a que el valor no se establece en el elemento.

También se puede escribir en forma de interpolación 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>