How to display byte[] as picture in HTML with Java?

Question

I use Spring MVC and JPA in my project. I get file as byte[] and save in Database. But when I want to display in <img> tag of HTML it doesn't get displayed.

My entity is:

class Photo {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO) 
    private Long id;

    private String title;

    @Lob
    private byte[] profilePic;

    // getter and setter
}

Value in the Database is:

But my server response is:

{
    "id": 4,
    "title": "pic 1",
    "profilePic": "ZGF0YTppb...VFtQ0M=",
}

And this is how I try to display the image in HTML:

<img src='ZGF0YTppb...VFtQ0M=' />
//or
<img src='data:image/jpeg;base64,ZGF0YTppb...VFtQ0M=' />

What to do to display the photo?

Thanks.

The value in your database is already a data: URI, so don’t try to encode it again. — Holger
– Holger, Commented Apr 14, 2022 at 9:43
Well, somehow, your database value, data:image/png;base64,iVBORw… became data:image/jpeg;base64,ZGF0YTp…. — Holger
– Holger, Commented Apr 14, 2022 at 9:48
Your question shows a Java class, JSON data, and HMTL. Somehow, these three things are linked and you should know, how. You didn’t even name the frameworks in use, forcing us to do guesswork. E.g., what happens when you change the type of profilePic (and associated getter and setter) to String? Does the framework pass the data as-is then, rather than base64 encoded? — Holger
– Holger, Commented Apr 14, 2022 at 9:59
Well, you didn’t answer the most important question. What happens when you just declare profilePic as String (because what you showed as database contents, data:image/png;base64,iVBORw… is a string). The reason you see [100, 97, 116, 97, 58, 105… when inspecting the data in the Java runtime is because that’s what you can expect when inspecting a variable of type byte[]. The framework used to export the byte array as JSON apparently decided to use base64 encoding for byte[]. It surely wouldn’t do that if the property had a string type. Using a string type could solve all problems… — Holger
– Holger, Commented Apr 14, 2022 at 10:24
Well, you will never know if you don’t try it. I don’t know whether the framework would do the conversion of a blob to string correctly, but on the other hand, I don’t use such tools which do “everything automatically” the wrong way. Still, there is a high chance that using a string at this place would do. Of course, you could instead leave everything as-is, then you have to live with the unnecessary base64 encoding. When you decode the 'ZGF0YTppb...VFtQ0M=' string on the Javascript side, like atob('ZGF0YTppb...VFtQ0M=') you also get the correct data: URI. — Holger
– Holger, Commented Apr 14, 2022 at 11:06

Ali Demirci · Accepted Answer · 2022-04-14 08:56:41Z

3

Assuming it's base64 encoded:

<img src='data:image/jpeg;base64,ZGF0YTppb...VFtQ0M=' />

Basically you can use data urls with this format depending on what content [type] you want to display:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

answered Apr 14, 2022 at 8:56

Ali Demirci

5,4827 gold badges42 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mehnet ali Over a year ago

hi thanks a lot, I have used this method before but that didn't work

Ali Demirci Over a year ago

then try converting byte[] to base64 string

mehnet ali Over a year ago

can I do something in javascript instead of java?

Vadim Dokurno · Accepted Answer · 2022-04-14 08:57:58Z

0

HTML:

<img id="profileImg" src="">

JS:

document.getElementById("profileImg").src = "data:image/png;base64," + profilePic;

This assumes that your image is stored in PNG format (and base64 encoded). For other image format (JPEG, etc.), you need to change the MIME type ("image/..." part) in the URL.

answered Apr 14, 2022 at 8:57

Vadim Dokurno

334 bronze badges

Collectives™ on Stack Overflow

How to display byte[] as picture in HTML with Java?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related