img data-src attribute

[tsamu]

If you use data-src attribute angular loads the image depending the position of the attribute.
http://jsfiddle.net/ryo2vg88/3/

[pkozlowski-opensource]

I'm not sure what you are trying to do, but if you want to provide a dynamic URL for an image you should use ngSrc directive: https://docs.angularjs.org/api/ng/directive/ngSrc

Having both src and data-src on one element doesn't make much sense.

[tsamu]

Just try to use data-src attribute to lazy load images.
http://jsfiddle.net/ryo2vg88/5/

[dinbror]

+1

Hey @pkozlowski-opensource.
Can you please elaborate:

• <img data-ng-src="{{imgsrc}}"> adds a src on the image tag (expected)
• <img data-src="{{imgsrc}}"> doesn't do anything (expected).
• <img data-src="{{imgsrc}}" src="base64 encode string"> replaces src with data-src attribute in chrome, safari (webkit), not in firefox (didn't expect it to do anything).
• <img src="base64 encode string" data-src="{{imgsrc}}"> replaces src with data-src attribute in firefox, not in webkit browsers (didn't expect it to do anything).

So when you both have a data-src and src attribute on an image angular somehow tries to resolve it but it doesn't work consistently across browsers!