Question

这是对这个答案的引用：Embed png image in html file using Jinja2

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

Answer 1

只需将您的base64图像放入IMG标记，比如id =“logo”，然后在任何您想要使用它的地方，只需要一个带有空“src”属性和class =“logo”的IMG标记。然后使用jQuery将这些IMG的“src”属性设置为master。 e.g。

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

此致尼尔

Answer 2

加载一次并使用jQuery .clone方法复制图像元素。

或者，或者从服务器加载它，就像正常成长的那样：）

Answer 3

另一种方法是将图像嵌入CSS中，并在需要图像的地方使用CSS类。

我怎样才能在Html ONCE中嵌入一个小图像（图标）并多次解压缩？

3 个答案: