Why {?}} Doesn't work in src attributes? Why do I need ngSrc?

Question

It works:

<a href="{{myAwesomeLink}}">It a link. A dynamic one, at that.</a> 

But this is not so:

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

Instead, use ngSrc . May I find out why this is so? I had a similar problem with getting "src" (or it was "href", I don’t remember) working in Handlebars.js and abandoning it (pressure for delivery).

Is this a common browser problem or something similar?

Answer 1

The extension of the answer is taller than me, and

 <a href="{{myAwesomeLink}}">It a link. A dynamic one, at that.</a> 

works, this is not the best practice when dynamically creating links using Angular. Every time you use data binding in a binding tag, you must use the ng-href directive. Thus, the code for the anchor tag should look like this:

 <a ng-href="{{myAwesomeLink}}">It a link. A dynamic one, at that.</a> 

Straight from Angular documentation:

Using Angular markup, as in the href attribute, makes the page open with the wrong URL, if the user clicks this link before Angular can replace the actual URL, the link will be broken and will probably return a 404 error. The ngHref directive solves this problem.

This helps us understand ng-src: So,

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

The browser tries to load the image, but Angular has not yet replaced the expression in brackets inside src, so the image does not load. Using

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

you tell the browser to wait for the image to load until the expression in parentheses is filled in, so load the correct image.

Answer 2

The documentation mentions this

Using Angular markup like {{hash}} in the src attribute does not work right: the browser will select {{hash}} from the URL with literal text before Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

If you think carefully, javascript is bound to your html after loading the html DOM, so the browser sees the intial src as {{url}} rather than the actual url string and fails.