嵌入Base64图像

html HTML

十三Jim

2020-03-18

纯粹出于好奇,Base64图像嵌入在哪些浏览器中起作用?我指的是这个

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

一些例子:

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...);
}

第2124篇《嵌入Base64图像》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
西里小卤蛋 2020.03.18

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

LEYPro达蒙 2020.03.18

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

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

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

猴子神乐 2020.03.18

更新时间:2017-01-10

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

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


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

  • 基于壁虎,例如Firefox,SeaMonkey,XeroBank,Camino,Fennec和K-Meleon
  • Konqueror,通过KDE的KIO从站输入/输出系统
  • Opera(包括Nintendo DSi或Wii等设备)
  • 基于WebKit,例如Safari(包括iOS上的Safari),Android的浏览器,Epiphany和Midori(WebKit是Konqueror的KHTML引擎的派生产品,但Mac OS X不共享KIO架构,因此实现方式有所不同)以及Webkit /基于铬的,例如Chrome
  • 三叉戟
    • Internet Explorer 8:出于安全原因,Microsoft已将其支持限制为某些“不可导航”的内容,其中包括担心脚本过滤器无法解释嵌入在数据URI中的JavaScript,例如基于Web的电子邮件客户端使用的脚本过滤器。在版本8 [3]中,数据URI必须小于32 KiB。
    • 仅以下元素和/或属性[4]支持数据URI:
      • 对象(仅图像)
      • img
      • 输入类型=图像
      • 链接
    • 接受URL的CSS声明,例如background-image,background,list-style-type,list-style等。
    • Internet Explorer 9:Internet Explorer 9没有32KiB限制,并且允许使用更广泛的元素。
    • TheWorld浏览器:IE Shell浏览器,它内置了对Data URI方案的支持

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android