writing image to a jsp from database

Question

I am trying to write an image to a jsp from database (saved as BLOB). I am using spring and in my controller, I do have the image byte[].

So I am doing this

byte[] imageBytes = dao.getImage(cc);

model.setAttribute("myimage", new String(imageBytes));

In my jsp, I have

<img src=data:image/jpg;base64,"<c:out value='${myimage}'/>" alt="my image" />

But I only see ascii charcaters in my jsp page (like below).

���K�_&�w:��=5�)^-����O?���R��?�z�i*\�*M�?��1�?�?�]?,��Z�?�I?�P??��?�z�~?v�?�k��?l�M�s�����?E���.��Q��]��?����a?h���e�/?�;�k�]����W�?c�?E���.��Q��]��??麯?~��-�?L��z?�Z�:?6??�z�=��a?��+���e�'�5�����??��?�?C���.�|��w�v?y��-�??U�?��?�D���?�g���ݭ)?A?�? 7��$��??�?�?�]??.���]�S�?�����bO��?L��e��z�h��gzn��?�?�?E���.�?.���]�<�eOO�?S��??� �˰.���]���?�ʿ?��?�?E��?`�]�ֻD��???�\?}U}?�>�T��m��z�h�t����U|E}?K��>�T� |�Q��]���Vd?�Q?�G��E�A�?�˰*�wz�i(sh?�U^�b?�z�~?v�m��Z�i�q?ULf%�L�z�~?v�o�z�i�;!&F�VϨ��?����K�?�u޵�u?��Vxx?�?ѯ��.�>W�[cֻKt��???�����??)e?b�}M�?���g�?h��ѯA/?��J��e�(����3�?����

I even tried to convert the byte[] to ByteArrayOutputStream and encode it with Base64, but didn;t work

model.addAttribute("image", Base64.encode(imageBytes));

But when I write the byte[] to a file(myimage.jpg) using FileOutputStream, I do see the image displayed in my jsp using the old fashioned way

<img src="../images/myimage.jpg" .... />

Answer 1

Unfortunately it won't work.

You need to use Spring MVC Controller method which will write your your image as byte[] to your HttpServletResponse class.

example:

@RequestMapping("/getImage/{id}")
public void getImage(HttpServletResponse response,@PathVariable("id") final String id) throws IOException {
    response.setContentType("image/jpeg");
    byte[] imageBytes = dao.getImage(id);
    response.getOutputStream().write(imageBytes);
    response.getOutputStream().flush();
}

and then use html code on client:

<img src="getImage/222" ... />

Update: Yes you can do it with @ResposneBody annotation starting from Spring 3.1

Register your ByteArrayHttpMessageConverter

<mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>image/jpeg</value>
                    <value>image/png</value>
                </list>
            </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

And then use yout controller:

@RequestMapping("/getPhoto/{id}")
public @ResponseBody byte[] getPhoto(@PathVariable("id") final String id) throws IOException {
    byte[] imageBytes = dao.getImage(id);
    return imageBytes;
}