base64 编码图像在 IE/Edge 中显示正常,但在 Chrome/Firefox 中显示不佳

base64 encoded image displays fine in IE/Edge but not in Chrome/Firefox

所以我随机抓取了 5 张 jpg 图片 images.google.com "drivers licenses" 然后我使用 org.apache.commons.codec.binary.Base64 库对所有图片进行 base 64 编码,然后将它们输出到 html 网页。除了这一张图片,它们看起来都很棒。它在 IE/Edge 中显示正常,但在 Chrome/Firefox 中显示不正常。

有什么想法吗?是我使用的库有问题还是 jpg 图像本身有问题?

这是一个演示问题的 jsfiddle:

https://jsfiddle.net/ccw6vu81/

<body>lotsof64bitEncodedImage</body>

我会 post 一个 stacksnippet 但有一段时间当 SO 变得充满政治色彩并且在他们的网站上到处都是彩虹时我屏蔽了他们的所有图像所以我可能找不到 link 来创建堆栈片段因为那个......并不是说我反对 LGBT 和彩虹,只是因为我患有眼部偏头痛,我发现彩虹通常会引起一种我觉得不愉快的惊恐发作。

好了,谜底解开了。显然,当我下载所有示例图像时,我没有对类型给予足够的关注。其中一个文件是 .png 而不是 .jpg。所以这个特定的图像是一个 png,其余的都是 jpg。这不一定是个问题,但是我在将这些文件转换为 base64 之前用来导入这些文件的中间工具只留下 JPG,而是将 png 文件转换为 tiff 文件。然后我对 tiff 文件进行 base64 编码,并尝试将它们显示在网页中,这显然在 IE/Edge 中有效,但在 Chrome/FF 中无效。 png 的实际 base64 编码适用于所有浏览器,不幸的是,这个中间工具不会将 png 保留为 png。我通过从 http://www.nightprogrammer.org/wp-uploads/2013/02/multipage_tiff_example.tif 下载一个 .tif 文件并将其转换为 base64 然后将其嵌入到标签中来确认这一点。它在 Edge/IE 中有效,但在 FF/Chrome 中无效。所以显然 IE/Edge 有一个可以转换 tif 图像的引擎,但 Chrome 和 FF 没有。