skip to Main Content

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� &amp;bH��$ �d��I 35�^;�&amp;$�� t'��-T{칩�@���ݏ���lTq�|�:������(�6�<��s��&quot;H���<Ǻ�~�Me���zCv>R��(�Ǟ�=S���9��hCG�=�X���<W�'_}�#k�z�CA��&quot;$�����ژ��x|�<yyaMx|����Pgy���^���S�:JX���9=�WNG����7WvbV�?'�e$U[T�{�x�lG����ܗ'O��Ϗ��?{��S��=����O.=M���{4󋶴����^h=�Ϗ�PvuW���vL�e&quot;&amp; @�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��,�� �($�!&quot;! ��(�&amp;q�q�&amp;D&amp;b��(A(�(�I�d�#$�HP1�>�&amp;q�P&amp; J$��L8��%��2c$�J$�He�D�3&quot;q&amp;bI�,@$f ��q����$f$D���1&quot;2�@&quot;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


  1. Chosen as BEST ANSWER

    I had used the following code. it is working fine.

    var image_ids = {!! json_encode($note->images->toArray()) !!};
    
    
    
    if (image_ids.length > 0) {
        var image_html = '';
        image_ids.forEach(element => {
            var oReq = new XMLHttpRequest();
                oReq.open("GET", "/api/v1/upkeep/notes/image/get/"+element.id, true);
                oReq.setRequestHeader("Authorization", 'Bearer '+token);
                // use multiple setRequestHeader calls to set multiple values
                oReq.responseType = "arraybuffer";
                oReq.onload = function (oEvent) {
                var arrayBuffer = oReq.response; // Note: not oReq.responseText
                if (arrayBuffer) {
                    var u8 = new Uint8Array(arrayBuffer);
                    var b64encoded = btoa(String.fromCharCode.apply(null, u8));
                    var mimetype="image/png"; // or whatever your image mime type is
                    document.getElementById("img-"+element.id).src="data:"+mimetype+";base64,"+b64encoded;
                }
            };
            oReq.send(null);
            // image_html += get_image(element.id);
        });
        
    }
    

  2. 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:

    <img src="data:image/jpeg;base64, {{BASE64 STRING}}" />
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search