Set img src from Byte Array

Question

I need to set the img src property from a byte array that I have in a Object.

<img id="profileImage">
    <spring:bind path="object.profilePicture">
        <input type="file" name="profilePicture" id="profilePicture" path="profilePicture">
    </spring:bind>

I need to display that byte array in the img above the input tag.

Answer 1

Replace the jpg with the type of image, and [your byte array] with your byte array . You need to convert it to base64 if it isn't already.

<img id="profileImage" src="data:image/jpg;base64, [your byte array]">

Answer 2

In my case the base64 byte array had to be chunked, in the way:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QCARXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUA
AAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAABIAAAAAQAAAEgAAAABAAOQAAAH
...

To make this solution works.

Answer 3

I use this site to convert images to the base64 byte array data, it gives me the tags in html and css so I just upload and copy/paste.

http://base64.wutils.com/encoding-online/