Whats equivalent to ngSrc in the newer Angular?

Question

I would like to implement img, with a src coming from JSON object.

In AngularJS, I could do:

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

Is there any equivalent to this in Angular 2+?

Answer 1

AngularJS:

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

Angular 2+:

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

Angular docs

---

Note that interpolation can achieve the same result:

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

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

There is no technical difference between these two statements for property binding, as long as you don't desire two-way binding.

Interpolation is a convenient alternative for property binding in many cases. In fact, Angular translates those interpolations into the corresponding property bindings before rendering the view. source

Answer 2

It is a two-step process to achieve the same functionality of ng-src in your Angular application.

First Step:

In your HTML, use the new syntax:

<img [src]="imageSrc">

Second Step:

In your component/directive, initialize the value to be empty. For example:

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

Now, this would eliminate the null network call (empty call) due to the value not being set on to the element.

Answer 3

It can also be written in interpolation form like:

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

Answer 4

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
       10, currentPage: p , totalItems: count  }">

   <td>
    <img src="{{post.youtubeVideoId}}">
   </td>

   <td>
     {{post.videoName}}
   </td>

</tr>