javascript - 在 JavaScript 中嵌入图像二进制文件

Question

有没有理由将 PNG 和 JPG 图像嵌入到这样的 JavaScript 文件中:

// Template/Image data
var LOGO = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4 etc";

var BACKGROUND = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIA etc";

如果我删除这些部分并改为调用存储在服务器上的文件，是否会导致性能下降或其他问题？我唯一能想到的是 Apache 为这些图像提供额外的请求，但我什至不确定它是否以这种方式工作。还有什么吗？

Answer 1

主要是为了方便和避免预加载图像。由于不需要向服务器发送额外的请求来显示图像，只要您将此值设置为 src 属性，图像就会显示。

就下载的数据量而言，此技术避免了额外请求的额外开销，但下载的总大小可能会更大一些，因为整个图像数据都是以 base64 编码的。在可能有大量此类图像的应用程序中，预加载可能会更好。