首页 文章

嵌入Base64图像

提问于
浏览
533

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

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

Some examples:

HTML:

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

CSS:

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

3 回答

  • 50

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

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

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

  • 344

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

  • 13

    Update: 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(包括Nintendo DSi或Wii等设备)基于WebKit的Safari(如Safari)包括iOS),Android的浏览器,Epiphany和Midori(WebKit是Konqueror的KHTML引擎的衍生物,但Mac OS X不共享KIO架构,因此实现方式不同),以及基于Webkit / Chromium的,例如Chrome Trident Internet Explorer 8:出于安全原因,Microsoft限制其对某些“不可导航”内容的支持,包括担心嵌入在数据URI中的JavaScript可能无法被脚本过滤器(例如基于Web的电子邮件客户端使用的脚本过滤器)解释 . 版本8中的数据URI必须小于32 KiB [3] . 仅支持以下元素和/或属性的数据URI [4]:object(仅图像)img input type = image link接受URL的CSS声明,例如background-image,background,list-style-type,list风格和类似 . Internet Explorer 9:Internet Explorer 9没有32KiB限制,允许使用更广泛的元素 . TheWorld Browser:一个IE shell浏览器,内置支持Data URI方案

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

相关问题