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

Question

我已经使用 org.apache.axis.encoding.Base64 class 将图像编码为 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 指向不存在的图像时，我只是得到 'missing image' 图标。

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

PS - 我还获取了 base64 字符串，并在 JSON 对象中将其从服务器传递给客户端，同时还包含一些其他内容。您在 jsfiddle 中看到的 Base64 字符串是我在客户端返回的内容。编码字符串在通过网络传输时是否可能已损坏或修改？

Answer 1

在您的 Java 中，您写的是 jpg 图像，但在 HTML 中显示为 png。

Answer 2

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

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

当我在我的 <img> 标签中将字符串末尾的 \u003d 更改为 = 时，图像在我的 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 对象，您应该不会遇到转义问题。

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

Base64 image encoded in Java not displaying in HTML

html

java

base64

encoding

image