Angular: specifying the img src

While it likely appears that <img src=”{{imageUrl}}”/> is working, you may wonder about the Angular way to specify the source and why.

When the browser is loading the page, before angular bootstrapping and creation of controllers, the browser will try to load image from literally “{{imageUrl}}“, which will fail. Then once angular is started, it will do the replacement of {{imageUrl}} to image.png for example. When the img src attribute changes, and browser then loads the image as expected. To avoid these 2 requests going and first one failing, do as below instead:

Angular 1:

<img ng-src="{{imageUrl}}">

Angular 2:

<img [src]="imageUrl">