data-src attribute on image tag replaces src automatically

[dinbror]

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!

Can someone 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 encoded placeholder"> replaces src with data-src attribute in webkit browsers (chrome, safari), not in firefox or IE (didn't expect it to do anything).
• <img src="base64 encoded placeholder" data-src="{{imgsrc}}"> replaces src with data-src attribute in firefox, not in webkit browsers or IE (didn't expect it to do anything).

See @tsamu jsfiddle for reference: http://jsfiddle.net/ryo2vg88/5/

[gkalpak]

The problem stems from the fact that (as part of the directive-name normalization process) the data- prefix is stripped from attribute names. Thus, it is like setting the src attribute twice.

The difference in behaviour between browsers is caused by different browsers traversing the attrbibute nodes in different order. Without looking too deep into it:

• Chrome iterates over attributes in order of appearance.
• Firefox (seems to) iterate over attributes in reverse order of appearance, but special-casing the id attribute and putting it in the end (thus accessing it first while iterating over attributes).

Based on what exactly you are trying to achieve, there should be different work-arounds available.
Regarding Angular itself, I'm not sure we can do much (without potentially breaking lot's of apps 😄).

[Narretz]

Closing due to inactivity