Image src in Angular 2+

Question

Is there a difference between these?

<img src="{{url}}">

<img [src]="url">

I know in AngularJS we had ng-src directive which was prefered to used to prevent loading image from {{url}} before angular takes over. Is this the same case?

It achieves the same result. [src] is not a known HTML attribute due to the []s, so the browser will not process it and will not make a request to the URL. It's really easy to try it out by just running the HTML you provided with different URLs and checking the network requests in your developer tools. — Kirk Larkin
– Kirk Larkin, Commented Dec 6, 2017 at 19:11

omeralper · Accepted Answer · 2017-12-06 19:20:38Z

1

<img [src]="heroImageUrl">

is short of

<img bind-src="heroImageUrl">

this code will result same as <img src="{{url}}">. [src] this is for property binding. However when you need to bind some data to attribute you cannot use it. For example: