javascript - 我怎样才能在 Html 中嵌入一个小图像(图标)一次并多次解压它？

Question

这是引用这个答案:Embed png image in html file using Jinja2

是否可以将图像的 Base64 编码嵌入到 Html 中一次，然后在很多地方使用它？如果需要的话我可以使用 jQuery。

Answer 1

只需将您的base64图像放入IMG标签中，例如使用id =“logo”，然后无论您想在哪里使用它，只需使用带有空“src”属性和class =“logo”的IMG标签即可。然后使用 jQuery 将这些 IMG 的“src”属性设置为 master。例如

jQuery:

var src = $('img#logo').attr('src');
$('img.logo').attr('src', src);

HTML:

    ......<img id="logo" src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="logo">
    ......
    ......<img class="logo" src="" alt="logo">

我很高兴你问这个问题，因为这是我几周前想在灯箱克隆 (slimbox2) 中做的事情。我想将图像嵌入到 javascript 中，而不是从文件加载它，因为图像是特定于 javascript 的(很好的“下一个”、“上一个”、“播放”、“暂停”按钮)，而且我不想要用户必须将它们存储在特定位置。

请注意，此类数据适用于 IE8 及更高版本，但显然不适用于 Internet Explorer 7 及更低版本。请参阅:

http://en.wikipedia.org/wiki/Data_URI_scheme

问候 尼尔