我无法显示 base 64 编码图像？答案

【问题标题】：I am not able to display a base 64 encoded image?我无法显示 base 64 编码图像？
【发布时间】：2017-04-27 12:35:24
【问题描述】：

1) 下面是如何，我正在编码图像--

StringBuilder prefixToImageEncodedString=new StringBuilder("data:image/*;base64,"); 

 InputStream in =new BufferedInputStream(new FileInputStream("D:/resources/Australia.jpg"));
byte[] bytes=ImageIO.read(in).toString().getBytes();
String encodedfile = new String(Base64.encode(bytes), "UTF-8");
String imageBaseURL=prefixToImageEncodedString.append(encodedfile).toString();

我得到以下输出：-

   data:image/*;base64,QnVmZmVyZWRJbWFnZUAxMzA5OWNjOiB0eXBlID0gNSBDb2xvck1vZGVsOiAjcGl4ZWxCaXRzID0gMjQgbnVtQ29tcG9uZW50cyA9IDMgY29sb3Igc3BhY2UgPSBqYXZhLmF3dC5jb2xvci5JQ0NfQ29sb3JTcGFjZUAxYzEyMWI2IHRyYW5zcGFyZW5jeSA9IDEgaGFzIGFscGhhID0gZmFsc2UgaXNBbHBoYVByZSA9IGZhbHNlIEJ5dGVJbnRlcmxlYXZlZFJhc3Rlcjogd2lkdGggPSAxODggaGVpZ2h0ID0gMTE5ICNudW1EYXRhRWxlbWVudHMgMyBkYXRhT2ZmWzBdID0gMg==

在前端（AngularJS），当我通过设置字符串显示图像时，它不显示图像。

<img src="{{countryImageNew}}" class="img1">

需要指导。

【问题讨论】：

标签： javascript java angularjs encode

【解决方案1】：

这不是你从文件中读取字节的方式：

byte[] bytes=ImageIO.read(in).toString().getBytes();

ImageIO.read 返回一个 BufferedImage。 BufferedImage 的 toString() 方法不返回图像的字节，事实上它不能，因为 Java 字符串不是字节容器。它们包含字符，而不是字节。试图假设一个字符串包含字节会导致你的字节损坏；具体来说，String.getBytes() encodes 使用字符集编码转换的字符串代码点。

您根本不应该使用 ImageIO。你没有做任何与数据相关的图像；你只想要字节：

byte[] bytes = Files.readAllBytes(Paths.get("D:/resources/Australia.jpg"));

此外，由于字符串不是字节的安全容器，因此不要使用new String(Base64.encode(bytes), "UTF-8")。这会损坏你的一些字节。创建 Base 64 编码字符串的正确方法是使用 encodeToString 方法：

String encodedfile = Base64.getEncoder().encodeToString(bytes);

【讨论】：

但是这个 encodeToString(bytes[] bytes) 无论如何都会将编码文件放入 String 容器中，对吧？
@YogeshSanchihar Base64 编码数据是 ASCII 文本，所以存储在 String 中是安全的。

【解决方案2】：

  &lt;img src="data:image/*;base64,QnVmZmVyZWRJbWFnZUAxMzA5OWNjOiB0eXBlID0gNSBDb2xvck1vZGVsOiAjcGl4ZWxCaXRzID0gMjQgbnVtQ29tcG9uZW50cyA9IDMgY29sb3Igc3BhY2UgPSBqYXZhLmF3dC5jb2xvci5JQ0NfQ29sb3JTcGFjZUAxYzEyMWI2IHRyYW5zcGFyZW5jeSA9IDEgaGFzIGFscGhhID0gZmFsc2UgaXNBbHBoYVByZSA9IGZhbHNlIEJ5dGVJbnRlcmxlYXZlZFJhc3Rlcjogd2lkdGggPSAxODggaGVpZ2h0ID0gMTE5ICNudW1EYXRhRWxlbWVudHMgMyBkYXRhT2ZmWzBdID0gMg=="&gt;

我认为编码不好，否则上述方法必须有效。我建议使用 Base64 编码 -

Base64.encode(FileUtils.readFileToByteArray(file));

【讨论】：

【解决方案3】：

尝试使用

<img [src]="countryImageNew" class="img1">

将src 括在括号中告诉Angular 用变量值替换该值。否则，文字字符串“countryImageNew”将被设置为源，而不是变量的值。

【讨论】：

Angular 1.x 应该是 ng-src。
你不需要{{ }}
不，它是 angularJS。对不起，我的错。
好的。我删除了问题上的angular 标签，因为它是针对Angular2+的。

【解决方案4】：

使用

<img ng-attr-src="{{countryImageNew}}" class="img1">

或者

<img ng-src="{{countryImageNew}}" class="img1">

【讨论】：