Difference between ngSrc and ngSrcset

Question

I didn't get clarity on 'ngSrcset', when i have gone through the Angular API reference docs. Can someone clarify with an example.

https://docs.angularjs.org/api/ng/directive/ngSrcset

Answer 1

Probably the easiest way to understand it is to analyze what happens when the page loads in each case.

Let's take a look at the "standard/buggy" example:

<img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>` 

Here is what happens:

• DOM loads
• attribute srcset found and recognized
• a request is made to http://www.gravatar.com/avatar/{{hash}}, which doesn't exist, of course, so we get a 404
• Angular fires up
• Angular interpolates template strings in DOM elements
• now we finally get something like http://www.gravatar.com/avatar/realHash, which is what we needed

---

Now let's take a look at the correct example:

<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>`

Here is what happens:

• DOM loads
• ng-srcset attribute is found, but not recognized, so no server calls are made
• Angular fires up
• Angular interpolates template strings in DOM elements taking into account all the ng-* attributes
• srcset attribute is created from the interpolated value of ng-srcset so we instantly get something like: <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x" srcset= "http://www.gravatar.com/avatar/realHash 2x" />, which is exactly what we want.
• newly added srcset attribute is found and recognized, so the server make a call to http://www.gravatar.com/avatar/realHash, and all is good

The same principle works for ng-src, ng-href, etc.

---

Here's an interesting article about the scrset itself: http://www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/