Difference between ngSrc and ngSrcset
I didn't get any clarity about "ngSrcset" when I looked through the Angular API reference docs. Can someone clarify with an example.
https://docs.angularjs.org/api/ng/directive/ngSrcset
Probably the easiest way to figure this out is to analyze what happens when the page is loaded in each case.
Let's look at a standard / buggy example:
<img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>`
Here's what's going on:
- DOM loads
- attribute
srcset
found and recognized - the request is made for
http://www.gravatar.com/avatar/{{hash}}
which of course does not exist, so we get a 404 - Angular fires
- Angular interpolates template strings in DOM elements.
- now we finally get something like
http://www.gravatar.com/avatar/realHash
what we need
Now let's look at a correct example:
<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>`
Here's what's going on:
- DOM loads Attribute
-
ng-srcset
found but not recognized, so no server calls are made - Angular fires
- Angular interpolates template strings in DOM elements taking into account all ng- * attributes Attribute
-
srcset
is created from the interpolated valueng-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" />
what exactly we want. - found a new and found attribute
srcset
, so the server makes a callhttp://www.gravatar.com/avatar/realHash
and it's all good
The same principle works for ng-src
, ng-href
etc.
Here's an interesting article about the script itself: http://www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/
It is said that bindings might not work inside srcset.
For example, you might have something like $ scope.test = "destination / picture.jpg"
if you use <img ng-srcset="{{test}}"/>
It will find the picture at destination /picture.jpg
Where, as if you used <img srcset="{{test}}"/>
Sometimes it may look for an image at "{{test}}" instead of "destination / picture.jpg". This is not always the case because this is a "buggy way of doing it", in some cases it might work and in others it might not.
Srcset: Srcset is a new attribute added in html5. We can use srcset to define multiple source url for a single image so that different images can be displayed at a resolution based on the current screen size. Let's see an example,
<img src="low-res.jpg" srcset="high-res.jpg 2x">
html5 compatible browser will render low-res.jpg for smaller screen size and will render high-res.jpg for larger screen (2x). In the example above, using the src attribute ensures that the default low-res.jpg can be rendered if the browser doesn't support html5.
For a better understanding of the srcset attribute you should try to read the following nice article:
srcset explained
ngSrcset: . Using the ngSrcset attribute, make sure that any expression used in the ng-srcset attribute can be parsed by angular.
So the next one doesn't work ,
<img src="low-res.jpg" srcset="{{src}} 2x"> <!-- {{src}} is not expanded by angularjs -->
While it works perfectly :
<img src="low-res.jpg" ng-srcset="{{src}} 2x"> <!--works fine -->
ngSrc: Similar reasoning applies to the ng-src attribute. NgSrc attributes can parse angular expression written in ng-src attribute, whereas expression used in src attribute will not be parsed by angularjs.
<img src="{{src}}"> <!--will not work,"{{src}}" will not be parsed by angularjs -->
<img ng-src="{{src}}"> <!--works fine, "{{src}}" will be evaluated by angularjs -->