当使用AngularJs时，如果在src attr上设置了img标签上的data-src

Question

我面临着一个愚蠢的问题。 我想在我的角度应用程序中使我的图像延迟加载，我试过这个2：

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

但他们都设置了src attr而不是data-src ，我在这里错过了吗？ 保持data-src attr的唯一方法是不要有任何src attr ??? 这按预期工作：

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

为什么？ 如果有src attr，如何在img标签上设置data-src ？

Answer 1

这可能对你有帮助 -

你可以使用Jquery-

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

JsFiddle-

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

Answer 2

我不太确定角度是如何在这里播放的，所以我不能完全确定它是如何影响这个问题的; 无论如何， data属性只是在加载时加载到dataset ，这意味着如果您具有data-src属性，则将在此元素的dataset对象中创建src属性。 也就是说，你可以使用这个：

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