使用AngularJs时如何在img标签上有src attr时设置data-src答案

【问题标题】：How to set data-src on img tag when it has src attr when using AngularJs使用AngularJs时如何在img标签上有src attr时设置data-src
【发布时间】：2016-09-13 11:56:00
【问题描述】：

我正面临一个愚蠢的问题。我正在尝试使我的图像延迟加载到我的 Angular 应用程序中，我已经尝试过这 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}}" >

为什么？当img标签有src attr时如何设置data-src？

【问题讨论】：

标签： javascript html angularjs src attr

【解决方案1】：

我不太确定 angular 在这里是如何发挥作用的，所以我不完全确定它是如何解决问题的；无论如何data 属性只是在加载时加载到dataset 中，这意味着如果您有data-src 属性，则将在dataset 对象中为该元素创建src 属性。也就是说，你可以使用这个：

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

【讨论】：

有多种方法可以在 Angular 之外破解它，而不是弄乱数据集，我可以在完成角度渲染后简单地设置 src 本身，但我不是在寻找破解
我想我对 angular 不够熟悉，我相信其他人已经得到了答案！干杯。

【解决方案2】：

这可能对你有帮助-

你可以使用 Jquery 来做到这一点-

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

JsFiddle-

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

【讨论】：

Tnx 尝试，但你在这里解决问题