How to set data-src on img tag when it has src attr when using AngularJs

Question

I am facing a stupid problem. I am trying to make my images lazy load in my angular app, I have tried this 2 :

<img src="/img/blank.gif" data-src="{{appCtrl.img}}" >
<img src="/img/blank.gif" ng-attr-data-src="{{appCtrl.img}}" >

But they both set the src attr instead of data-src , am i missing someting here ? The only way to keep the data-src attr is not to have any src attr ??? This works as expected :

<img ng-attr-data-src="{{appCtrl.img}}" >
<img data-src="{{appCtrl.img}}" >

Why? How to set data-src on img tag when it has src attr?

Answer 1

This might help you-

You can do it using Jquery-

$("img").attr("data-src","appCtrl.img");

JsFiddle-

https://jsfiddle.net/codecore/2fqbbsst/

Answer 2

I am not quite sure how angular plays in here, so i am not full sure how it plays into the problem; anyways data attributes are just loaded into the dataset on load, meaning if you have the data-src attribute a src property will be created in the dataset object for this element. That said, you can use this:

yourDOMElement.dataset.src = "{{appCtrl.img}}"