嵌入Base64图像

Question

嵌入Base64图像

纯粹出于好奇,哪些浏览器可以进行Base64图像嵌入工作？我指的是这个.

我意识到它对于大多数事情来说通常不是一个好的解决方案,因为它会增加页面大小 - 我只是好奇.

一些例子:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

Run Code Online (Sandbox Code Playgroud)

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Phi*_*ber 357

更新:2017-01-10

现在所有主流浏览器都支持数据URI.IE也支持从版本8开始嵌入图像.

http://caniuse.com/#feat=datauri

以下Web浏览器现在支持数据URI:

基于Gecko的,如Firefox,SeaMonkey,XeroBank,Camino,Fennec和K-Meleon

Konqueror,通过KDE的KIO奴隶输入/输出系统

Opera(包括任天堂DSi或Wii等设备)

基于WebKit,如Safari(包括iOS),Android浏览器,Epiphany和Midori(WebKit是Konqueror的KHTML引擎的衍生物,但Mac OS X不共享KIO架构,因此实现方式不同),以及Webkit /基于铬,如Chrome

三叉戟

Internet Explorer 8:出于安全原因,Microsoft限制其对某些"不可导航"内容的支持,包括担心嵌入在数据URI中的JavaScript可能无法被脚本过滤器(例如基于Web的电子邮件客户端使用的脚本过滤器)解释.版本8中的数据URI必须小于32 KiB [3].

仅支持以下元素和/或属性的数据URI [4]:

对象(仅限图像)

IMG

输入类型=图像

链接

接受URL的CSS声明,例如background-image,background,list-style-type,list-style等.

Internet Explorer 9:Internet Explorer 9没有32KiB限制,允许在更广泛的元素中使用.

TheWorld Browser:一个IE shell浏览器,内置支持Data URI方案

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

IE8限制 - 我发现IE8的嵌入图像**最大字符限制为32,768**([每个微软](https://msdn.microsoft.com/en-us/library/cc848897(v = vs. 85).aspx))我的嵌入图像刚刚超过35,000.所以当`background-image` CSS属性(`url(... embedded image`)试图在IE8中加载时,因为超出了字符限制,所以没有加载包含该属性的整个`class`.我做了为了解决这个问题,我没有对这个问题进行修复,对于超出最大值的嵌入式图像,我恢复了"img",并且我的图像被适当加载. (5认同)

Answer 2

小智 52

大多数现代桌面浏览器(如Chrome,Mozilla和Internet Explorer)都支持编码为数据URL的图像.但是在某些移动浏览器中显示数据URL存在问题:Android Stock Browser和Dolphin Browser不会显示嵌入的JPEG.

我建议您使用以下工具进行在线base64编码/解码:

选中"格式化为数据URL"选项以格式化为数据URL.

您不需要在线工具即可编码为base64。相反，您可以在Linux或Mac OS X上使用base64命令行工具：echo“ data：image / jpeg; base64，” $（cat file.jpg | base64） (3认同)

Answer 3

keh*_*ers 13

我可以使用(http://caniuse.com/#feat=datauri)显示主要浏览器的支持,而IE上几乎没有问题.

归档时间：	16 年，2 月前
查看次数：	642823 次
最近记录：	7 年，3 月前