CODEWITHSUNDEEP
javascriptjavaangularjsencode
Yogesh Sanchihar
Yogesh Sanchihar

Reputation: 1118

I am not able to display a base 64 encoded image?

1) Below is how, I am encoding the image--

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();

I am getting following output:-

   data:image/*;base64,QnVmZmVyZWRJbWFnZUAxMzA5OWNjOiB0eXBlID0gNSBDb2xvck1vZGVsOiAjcGl4ZWxCaXRzID0gMjQgbnVtQ29tcG9uZW50cyA9IDMgY29sb3Igc3BhY2UgPSBqYXZhLmF3dC5jb2xvci5JQ0NfQ29sb3JTcGFjZUAxYzEyMWI2IHRyYW5zcGFyZW5jeSA9IDEgaGFzIGFscGhhID0gZmFsc2UgaXNBbHBoYVByZSA9IGZhbHNlIEJ5dGVJbnRlcmxlYXZlZFJhc3Rlcjogd2lkdGggPSAxODggaGVpZ2h0ID0gMTE5ICNudW1EYXRhRWxlbWVudHMgMyBkYXRhT2ZmWzBdID0gMg==

At front end (AngularJS), when I am displaying the image by setting the string, it is not displaying the image.

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

Guidance is required.

Upvotes: 0

Views: 717

Answers (4)

VGR
VGR

Reputation: 44414

This is not how you read bytes from a file:

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

ImageIO.read returns a BufferedImage. The toString() method of BufferedImage does not return the bytes of the image, and in fact it can’t, because Java Strings are not byte containers. They contain characters, not bytes. Attempting to assume a String contains bytes will result in the corruption of your bytes; specifically, String.getBytes() encodes the String’s codepoints using a charset encoding transformation.

You should not be using ImageIO at all. You’re not doing anything image-related with the data; you just want the bytes:

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

Also, since a String is not a safe container for bytes, do not use new String(Base64.encode(bytes), "UTF-8"). This will corrupt some of your bytes. The correct way to create a Base 64 encoded string is with the encodeToString method:

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

Upvotes: 2

Ishank
Ishank

Reputation: 2926

  <img src="data:image/*;base64,QnVmZmVyZWRJbWFnZUAxMzA5OWNjOiB0eXBlID0gNSBDb2xvck1vZGVsOiAjcGl4ZWxCaXRzID0gMjQgbnVtQ29tcG9uZW50cyA9IDMgY29sb3Igc3BhY2UgPSBqYXZhLmF3dC5jb2xvci5JQ0NfQ29sb3JTcGFjZUAxYzEyMWI2IHRyYW5zcGFyZW5jeSA9IDEgaGFzIGFscGhhID0gZmFsc2UgaXNBbHBoYVByZSA9IGZhbHNlIEJ5dGVJbnRlcmxlYXZlZFJhc3Rlcjogd2lkdGggPSAxODggaGVpZ2h0ID0gMTE5ICNudW1EYXRhRWxlbWVudHMgMyBkYXRhT2ZmWzBdID0gMg==">

I think the encoding is bad else the above ways must work. I would suggest to do the Base64 encoding like -

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

Upvotes: 2

Md Hasan Ibrahim
Md Hasan Ibrahim

Reputation: 1898

Use

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

Or

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

Upvotes: 0

Tyler Jennings
Tyler Jennings

Reputation: 8921

Try using 

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

Wrapping src in brackets tells Angular to replace the value with the variable value. Otherwise, the literal string 'countryImageNew' is what gets set as the source, not the value of the variable.

Upvotes: 0

Related Questions