javascript - 如何在不发出 HTTP 请求的情况下在 HTML 中显示 'key'？

Question

我想在我正在创建的 HTML/JavaScript 应用程序中的某些关键字旁边显示一个“ key ”(来自钥匙串(keychain))，但我不想发出任何 HTTP 请求来加载图像。如何在所有主要浏览器上可靠地执行此操作？

是否有有效的 UNICODE 值？ (我没找到)

有可用的 Webdings 字体吗？ (它们通常不适用于 Opera 和 Firefox)

有没有办法使用 JavaScript 中的字符串提供的 Base64 图像源在 JS 中创建图像？

谢谢!

Answer 1

您可以使用base64 data in a image's scr属性:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

然后您可以使用 JavaScript 扫描文本，并在需要的地方添加图像标签。
(或者将文本包裹在跨度中，并将图像设置为跨度的背景。)

<小时/>

要在 DOM 中实际创建图像:

var img=document.createElement("img");
    img.setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38G    IAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
    img.setAttribute('alt', 'Red dot');
    img.setAttribute('height', '10px');
    img.setAttribute('width', '10px');
document.body.appendChild(img);

<小时/>

编辑:
You can use this tool将图像编码为 Base64。