Html src和data src属性之间的所有区别是什么？

使用

img

标签的

data-src

或

src

属性有什么区别和后果（好的和坏的）？使用这两种方法可以获得相同的结果吗？如果是这样，应该在什么时候使用它们？

第一个

是必需的属性
data src
是一个属性，例如JavaScript无法利用它，但它没有表示意义。
data src属性仅用于绑定数据，例如ASP.NET


如果希望图像加载并显示特定图像，请使用
.src
加载该图像URL

如果您想要一段可以包含URL的元数据（在任何标记上），请使用
data src
或您想要选择的任何
data xxx

关于数据xxxx属性的MDN文档：

图像标签上的
src
示例，其中图像为您加载JPEG并显示：

<img id="myImage" src="http://mydomain.com/foo.jpg">

<script>
    var imageUrl = document.getElementById("myImage").src;
</script>

属性
src
和
data src
没有任何共同之处，只是它们都是HTML5 CR允许的，并且都包含字母
src
。其他一切都不一样

src
属性是在HTML规范中定义的，它具有功能意义

data src
属性只是无限组
data-*
属性中的一个，这些属性没有定义的含义，但可以用于在元素中包含不可见的数据，以便在脚本（或样式）中使用<必须包括代码>src

。您可以使用

data-

attributes为脚本语言（如JavaScript）添加额外数据，以充分利用。Angular.js还使用data src基于模型对URL进行后期绑定感谢您的明确回答：）即将使用jQuery.lazy，但不确定scr的

<div id="myDiv" data-src="http://mydomain.com/foo.jpg">

<script>
    // in all browsers
    var imageUrl = document.getElementById("myDiv").getAttribute("data-src");

    // or in modern browsers
    var imageUrl = document.getElementById("myDiv").dataset.src;
</script>

<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">

<script>
    var item = document.getElementById("myImage");
    // switch the image to the URL specified in data-src
    item.src = item.dataset.src;
</script>