mshafnas
OP
Posted 1 hour ago
Display Image From Ajax Response
Hi developers, I am getting the image from ajax response with the header content-type image/jpeg, I would like to display it using the img tag. when I append the src of image to the response. it is not displaying the image.
the response having some weird text and symbols.
can any one guide me to solve this issue. thanks.
below is the response
����JFIF��C
%# , #&’)*)-0-(0%()(��C
(((((((((((((((((((((((((((((((((((((((((((((((((((��R"�������=����^�yעu臝z!�^�yע��=�D<��:�Cν�G�z!�^�yעu臝z!�^�yף�ν�D<����^�yעu��D<��:�Cν�D<��:�Cν�D<��:�Cν8Ȉ�G�y�=,�ـJ�$�N9(&$�����Ǚ�z�%D� &bH��$ �d��I 35�^;�&$�� t'��-T{칩�@���ݏ���lTq�|�:������(�6�<��s��"H���<Ǻ�~�Me���zCv>R��(�Ǟ�=S���9��hCG�=�X���<W�'_}�#k�z�CA��"$�����ژ��x|�<yyaMx|����Pgy���^���S�:JX���9=�WNG����7WvbV�?'�e$U[T�{�x�lG����ܗ'O��Ϗ��?{��S��=����O.=M���{4����^h=�Ϗ�PvuW���vL�e"& @�B
�������
zk�#��}$����z< ����?I2���(}o���2�.�u�?����V�g5��<��gG���$
�j���_�ǔ��8��~c�>7����W}����z/0^qh�2���Dz���<Ǩ�?G1����f{A�y��u�~�m�� 4�’���«+(<��Ǵ�ϫ��;jm,I���x�k��5m9��5�%���O����v�xq��x�gXP�~�bG�����z0;�_����2��尡�����ُ�8�=���5>ˠ�������/���y�|��gdl � D�B$�"$BD8��HG��,�� �($�!"! ��(�&q�q�&D&b��(A(�(�I�d�#$�HP1�>�&q�P& J$��L8��%��2c$�J$�He�D�3"q&bI�,@$f ��q����$f$D���1"2�@"
LILIL ��`�LLM.ʸ�=�q5�1A����w��-�R����
��w?����U]����E��|��S�]M�Vr�S�]3G؝��%�Wc]}>s�����~�K=��%��Q�[���x���Z)r��O,z��W���1�겲�W��B�,TJ��۔p�[�[�v���ۮ��/�qv�E7w^�G�l���8�nָ�c�Uo���4nەj�-[}�y����Of’$v��_N����-��>>�N^�����ڼ��Lh�Ձ��;l���ɳ����t�Q�mql�C��p, �o#z��؊o5җ�i��nb��8���Y�[�9k�u�;m��;�M�W�Ew-��K�w�G��“��jy����G��”%����TtY�Z8� ����J�Ġ�ۼ����Req���m�M�ײ8�n��u�G�����u�.���m֘U.v�S�d@�� ȂX�%�����@��"@�D�D� (���&$A3���ȂX���0�$Hb2c$���8�L k�8�I�Uy3c����1 L@Ɉ���f��&bC�� �X���� ����1�X�Ĉ���B&�9�)�DL
nn�3�ہ�w?9�i[���Ϩ���hV؝�[�#���Ó�����p�
Coding
function base64Encode(str) {
var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var out = "", i = 0, len = str.length, c1, c2, c3;
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
out += CHARS.charAt(c1 >> 2);
out += CHARS.charAt((c1 & 0x3) << 4);
out += "==";
break;
}
c2 = str.charCodeAt(i++);
if (i == len) {
out += CHARS.charAt(c1 >> 2);
out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
out += CHARS.charAt((c2 & 0xF) << 2);
out += "=";
break;
}
c3 = str.charCodeAt(i++);
out += CHARS.charAt(c1 >> 2);
out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
out += CHARS.charAt(c3 & 0x3F);
}
return out;
}
var token = "{{$token}}";
$.ajax({
url: '/api/v1/upkeep/notes/image/get/1',
// dataType: 'image/jpeg',
headers: {
Authorization: 'Bearer '+token
},
method: 'GET',
success:function(response){
$('#image-note').attr('src', 'data:image/jpeg;base64,' + base64Encode(response));
}
});
2
Answers
I had used the following code. it is working fine.
This is a binary file response, in your case an image file. You can just use this URL directly as the
src
of your image, no need for an ajax request.To use the content of this request directly on an image, you can base64 encode this content and set it directly as the src attribute like so: