用 Java 编码的 Base64 图像不显示在 HTML 中

Posted 2023-03-05

【中文标题】用 Java 编码的 Base64 图像不显示在 HTML 中

【英文标题】：Base64 image encoded in Java not displaying in HTML

【发布时间】：2015-11-22 20:04:05

【问题描述】：

我使用org.apache.axis.encoding.Base64 类将图像编码为base64。我的代码：

public String get64EncodedPhotoForUser(User user) 

        // Path to image
        String path = "some path to the jpg file on the server";

        // Read image from server
        String base64Image = null;

        try 

            BufferedImage bufferedImage = ImageIO.read(new File(path));
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(bufferedImage, "jpg", baos);
            baos.flush();
            byte[] imageInByte = baos.toByteArray();
            baos.close();
            base64Image = Base64.encode(imageInByte);

         catch (Exception e) 
            System.out.println(e.getMessage());
        

        return base64Image;

    

如您所见，我首先将图像转换为字节数组，因为这是编码方法所期望的。一切似乎都工作正常，我得到了我的编码字符串，它似乎是一个正确编码的字符串。值得一提的是，一些在线解码器可以正确解码图像，而另一些则不能，我认为这很奇怪..

当我尝试在我的 html 中显示图像时：

<img ng-src="data:image/png;base64,/9j/4AAQSkZJRgABAgAAA..." id="avatar">

它不起作用。当您将 html 指向不存在的图像时，我会看到“缺少图像”图标。

我已将编码字符串复制并粘贴到 jsfiddle 中，您可以查看 here

PS - 我还采用 base64 字符串，并将它与其他一些东西一起以 JSON 对象的形式从服务器传递到客户端。您在 jsfiddle 中看到的 Base64 字符串是我在客户端返回的。是不是编码的字符串在通过网络传递时可能已被损坏或修改？

【问题讨论】：

快速问题：从在 Java 中输出 base 64 编码字符串到创建 Fiddle，您采取了哪些步骤？这是将最终字符转换为显式 unicode 的地方。

我基本上采用该编码字符串，将其设置为我创建的“用户”POJO 的属性，然后使用 Gson (github.com/google/gson) 将该用户 POJO 转换为 JSON 对象，然后我使用 HttpServletResponse 发送到客户端，将内容类型设置为“text/json”

【参考方案1】：

base 64 编码字符串末尾的等号已转换为 unicode 格式 (\u003d)：

/9j/4AAQSkZJR...IQd6QknrS54460h60BY//9k\u003d
  ^                                     ^
 start                                 end

当我将字符串末尾的\u003d 更改为<img> 标记中的= 时，图像在我的Chrome 浏览器中加载正常。这是我用来加载图像的代码：

<IMG src="data:image/jpeg;base64,/9j/4AAQSkZJR...IQd6QknrS54460h60BY//9k=">

请注意，删除 unicode 字符似乎也可以在浏览器中使用。

发生了什么：

我使用 Apache Axis Base64.encode() 方法测试了您的 Java 代码，输出看起来正确，即字符串按预期以等号结尾。但是，在您提供的 JS Fiddle 中，会出现 unicode 字符。基于this GitHub blog，似乎Gson 库HTML 出于某种原因转义了最后一个字符。无论是错误还是不良功能，Gson 都提供了解决此问题的方法：

Gson gson = new GsonBuilder().disableHtmlEscaping().create();

使用此版本的Gson 对象构建您的 JSON 对象，您应该不会遇到转义问题。

【讨论】：

您能想到这一点真是太棒了。您是否知道它为什么存在以及我可以做些什么来不将该校验和附加到字符串？ PS - 刚刚检查过，当你删除它时它确实有效！

我盯着 Base 64 编码字符串的末尾，我看到一个似乎是 unicode 字符的东西在盯着我看。我搜索了整个字符串，结果发现我没有找到其他字符串。更大的问题是为什么在线 Base 64 解码器（例如 this one）能够解码并生成图像文件，例如 MS Paint 能够打开，但 Chrome 却卡住了。

火狐也不喜欢它。

让我们continue this discussion in chat.

谢谢，院长。我喜欢解决棘手的问题，当我不能轻易解释它们时，我更喜欢它们。

【参考方案2】：

在您的 Java 中，您正在编写一个 jpg 图像，但您在 HTML 中将其显示为 png。

【讨论】：

如果这就是我要自己解决的问题..让我解决这个问题。

不，抱歉，我将 HTML 更改为 'jpg' 和 'jpeg'，但我仍然遇到同样的问题......不过，你的眼睛很好。

可能会发生很多事情，无论是字符集是问题，还是来自 Java 的编码是问题。请阅读此讨论***.com/questions/8499633/…

请查看我编辑的问题，base64 字符串通过 http 传递给客户端。字符串会在该过程中损坏或修改吗？