How to capture and render an image from Play framework, Jquery Ajax, from Heroku

Question

As the title states, I'm trying to get an image from my database to try an display on an external web page. Eventually I would like to use this for a mobile application that is run with PhoneGap.

renderBinary(member.profileImage.getFile());

(This is inside a member class)

public Blob profileImage; 

So far, then I try to receive the image using ajax I get this: (note, this is like half a line of the 100 lines that I get)

�������"����� ��?����������
���������
�3�!1AQa"q�2���B#$R�b34r��C%�S���cs5���&D�TdE£t6�U�e���u��F'�������������Vfv��������7GWgw���������5�!1AQaq"2����B#�R��3$b�r��CScs4�%���&5��D�T�dEU6te����u��F�������������Vfv��������'7GWgw����������?��^�[�'*��X���;+����#��u#Ѻ�zn���s���L�ʿ�m�Z%%�Z�P�n�W��&�6��}�G�� O�Q�k~1�y$\��Վ��ku���z�X�.�WSs�z��c}�f�������J��L���'ncO��E��K�z��V%7\���0���c`��/�?����A^���v��k�&�^� i�s?ͳژM!+}Ula.~��˩w�g�؊�̻��Q��|���W��

So is there anyway that I might be able to convert this into Base64? Or even just something that I can use to place in an image tag on an html file?

Answer 1

This looks like an encoding problem.

Are you storing a mimetype with the image, or alternatively, do you know the mime type ahead of time? What do your HTTP response headers look like on the AJAX? Based on what I see, you probably just need to include a mime type. Eg, for JPEG use content-type: image/JPEG in your response header.