Question

0

86

Vistas

how to display byte[] as picture in html with java

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 don't display.

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 Database is:

but my server response is:

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

and display in html:

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

What to do to display the photo?

thanks

5 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-30T23:45:23.655Z

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>

Answer 2 · 2022-06-30T23:45:23.664Z

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.