HTML 中不同图像的一张 Base64 编码图像

Question

我创建了一个轻量级 html 页面。我想为 <link rel="shortcut icon">、<meta property="og:image"> 和 <body> 中的一个 <img> 使用相同的图像。该图像是 Base64 编码的，因此不需要外部请求。贴了三遍图片代码，页面有点厚重。我知道我可以使用 JavaScript 将图像分配给变量然后将其传递给不同的图像，但是如果设备不支持 JavaScript 怎么办？所以我的问题是：

除了 JavaScript 之外，还有其他替代方法可以使用一个 Base64 图像作为不同的图像源吗？

Answer 1

您可以使用 CSS。例如：

.selector{
    background: url(data:image/gif;base64,R0lGO...);
}

虽然它不适用于网站图标。所以你必须把它放在那里3次，或者使用javascript.

HTML 中不同图像的一张 Base64 编码图像

One Base64 coded image for different images in HTML

html

javascript

base64