Question

我正在尝试使用数据uri方案在浏览器上解码base64编码的图像。

这就是我的html的样子：

<img src="data:image/png;base64,base64_string_here" 
  alt="base64 image name" width="600" height="400" border="1" />

Chrome和Firefox无法解码这些图片，而是显示默认的“图片无法加载”图片。我已经验证我传递给浏览器的base64图像是正确的。事实上，Safari显示相同的图像没有问题。

我尝试让浏览器解码类似的base64编码的pdf，但这也不起作用。（同样，它在Chrome和Firefox上无效，但在Safari上有效。）

<img src="data:application/pdf;base64,base64_string_here" 
  alt="base64 pdf name" width="600" height="400" border="1" />

Chrome版本：18.0，FF版本：11.0

有谁知道这里有什么问题吗？（如果它有帮助 - 我试图显示的base64编码图像是USPS运输标签）。

Answer 1

Chrome和Firefox很可能会打开TIF图像 - 如果你告诉他们，它们就是TIF图像。目前在你的例子中你告诉他们，他们是PNG图像，这应该是问题...尝试：

<img src="data:image/tiff;base64,base64_string_here" 
  alt="base64 image name" width="600" height="400" border="1" />

Answer 2

事实上，即使您提供正确的MIME类型，Chrome，Firefox和Opera本身也不支持.TIF文件：它们需要一个插件来处理它们。

这里有一个有用的图像文件浏览器支持摘要：http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Answer 3

我知道这是一个非常老的问题，但是我最近遇到了同样的问题。（从USPS标签返回结果）我通过将Base64字符串编码的TIFF转换为Base64字符串位图图像进行了修复（尽管您可以使用所需的任何图像类型）。

我正在使用C＃转换图像：

    Byte[] arrTiff = Convert.FromBase64String(FixBase64ForImage(oeVS.LabelImage));
    System.IO.MemoryStream msTiff = new System.IO.MemoryStream(arrTiff);
    Bitmap bmpTiff = new Bitmap((Bitmap)Image.FromStream(msTiff));
    System.IO.MemoryStream msBmp = new System.IO.MemoryStream();
    bmpTiff.Save(msBmp, System.Drawing.Imaging.ImageFormat.Bmp);
    Byte[] arrBmp = msBmp.ToArray();
    string sBMP64 = Convert.ToBase64String(arrBmp);

然后在html / javascript中，您可以使用它来显示标签，其中sBMP64是上面的结果。

<img src='data:image/bmp;base64,sBMP64'>

BMP出于我的目的而工作，但这是浏览器提供的图像支持表：https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Answer 4

它与最近的Chromium团队决定阻止顶级框架导航到数据网址（在Google Chrome最新版本60更新中）有关。

https://productforums.google.com/forum/#!topic/chrome/wvYYcBwJ9FA;context-place=topicsearchin/chrome/category $ 3AStable％7Csort：相关性％7Cspell：假

Firefox和Chrome不会解码base64图像或pdf文件

4 个答案: