Html 为什么以这种方式使用数据属性？

在学习如何使用Bootstrap时，我注意到缩略图对图像源有奇怪的标记（至少对我来说很奇怪）

这里发生了什么，为什么要这样做？是否以某种方式将映像保存到base64中的某个位置的本地存储

---

为了澄清，我问的是关于

src=“image:///code>部分。
您看到的不是，而是。引用维基百科：

数据URI方案…提供了一种在web中在线包含数据的方法
页面就好像它们是外部资源一样。这种技术允许
通常情况下，图像和样式表等单独的元素
获取单个HTTP请求，而不是多个HTTP请求，
哪个更有效

您看到的是base64编码的图像数据，在本例中是PNG。当浏览器看到这些数据时，他们会按照指示对数据进行解码，并将其显示为一个外部资源

鉴于此图像的大小，Bootstrap的创建者正确地认为，像这样内联图像比单独保存图像更有效。如果将图像单独保存，则需要额外的HTTP请求来加载图像，这会增加页面的总加载时间。
在Bootstrap的情况下，我想您会看到ing是用于生成src属性中的数据的Javascript

如果查看原始源（而不是inspector中的源），可能不会看到src属性，只会看到data src

data src属性是javascript使用holder.js脚本生成要放入src的数据的指令

因此holder.js生成图像，然后作为数据uri加载到img中，如其他答案所述。
据我所知：前缀为“data”的属性“是允许的。允许您在image元素上保存该图像的缩略图src，以便于以后的操作。我知道data属性的作用，但不知道图像是如何保存和嵌入到该data属性中的。此：，wiki文章：@DoctorOreo您混淆了HTML5
data-
属性，使用
数据：
URI方案。这是两件完全不同的事情。
<img data-src="holder.js/260x120" alt="260x120" style="width: 260px; height: 120px;" src="data:image/png;base64,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">