在学习如何使用 Bootstrap 时，我注意到缩略图对图像源有奇怪的标记(至少对我来说很奇怪。)
<img data-src="holder.js/260x120" alt="260x120" style="width: 260px; height: 120px;" src="data:image/png;base64,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">
这里发生了什么，为什么要这样做？图像是否以某种方式以 Base64 形式保存到本地存储？
为了澄清，我问的是 src="image:/ 部分。
最佳答案
您看到的不是 HTML5 data- attribute ，但是data URI scheme 。引用维基百科:
The data URI scheme ... provides a way to include data in-line in web pages as if they were external resources. This technique allows normally separate elements such as images and style sheets to be fetched in a single HTTP request rather than multiple HTTP requests, which can be more efficient.
您看到的是 base64 编码的图像数据，在本例中是 PNG。当浏览器看到这一点时，它们会按照指示解码数据，并将其显示为外部资源。
考虑到该图像的大小，Bootstrap 的创建者正确地认为像这样内联图像比将其分开更有效。如果他们将其分开，则需要额外的 HTTP 请求来加载图像，这会增加页面的总加载时间。
关于html - 为什么要这样使用数据属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14166538/