0

The image is stored in a directory on a php server.

Service:

.factory('PhotoService', function($q, $http) {
   return {
    getPhoto: function(photoName) {
    var url = dirInfo.template_directory + 'quoteCalc/images/Upload/' +      photoName;
    return $http.get(url).then(function(response) {
        return response.data;
    })
    .catch(function(error) {
        return "Photo not found: " + error;
    });
}
}
})

I call that factory in the controller using this function. The data is returned fine but the format is off and the image does not display.

function init() {
    let photo;
    PhotoService.getPhoto(imageName).then(function(result) {
        $scope.imgstr = result;
    });
};
init();

The image/response.data comes in this weird format. I dont know what to do with it. I have tried:

 var blob = new Blob([response.data], {type: 'application/octet-    binary'});
 return URL.createObjectURL(blob);

and

var reader = new FileReader();
return reader.readAsDataURL(response.data);

also

<img ng-src="data:image/png;base64,{{imgstr}}" />

Nothing works. Please help.

This is what is returned:

�����ExifMM*� ���(1�2��ï%HAppleiPhone

6HH9.2.12016:02:09 09:00:51 ��R��Z�"�'��0221�b�v�� ���� �� ��� � ����|F���234��234�0100���� ��������2�3 �4"&2016:02:09 09:00:512016:02:09 09:00:51��� �JM@bSIs��Apple iOSMM .�h� � �
. bplist00OVz�2�����.��Vu����������iX�e����9 ��o�z�f����l)���1����|��yg�g�wz����o�Xem'@D1\vW�S�w�8��~H(O�wboI�Tp\�"9".��)xNT�>G$O��R!i�3 �d��-�+20 �ux7�Q%+# 3"#j�&dY". �7J<=�|�[T) LqL�vFEh:_*HR$hcl�Q?&C*zXJ�*hX_�.*3A;V-f2ubplist00�UflagsUvalueUepochYtimescale��:�;��#-/8: ?���+0�B����-$SSAppleiPhone 6 back camera 4.15mm f/2.2NW2:K RTZTbjv/$dz�d��2������2016:02:09A���http://ns.adobe.com/xap/1.0/<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0"> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:mwg-rs="http://www.metadataworkinggroup.com/schemas/regions/" xmlns:stArea="http://ns.adobe.com/xmp/sType/Area#" xmlns:apple-fi="http://ns.apple.com/faceinfo/1.0/" xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions#"> <mwg-rs:Regions rdf:parseType="Resource"> <mwg-rs:RegionList> <rdf:Seq> <rdf:li rdf:parseType="Resource"> <mwg-rs:Area rdf:parseType="Resource"> <stArea:y>0.363000</stArea:y> <stArea:w>0.042000</stArea:w> <stArea:x>0.969000</stArea:x> <stArea:h>0.056000</stArea:h> <stArea:unit>normalized</stArea:unit> </mwg-rs:Area> <mwg-rs:Type>Face</mwg-rs:Type> <mwg-rs:Extensions rdf:parseType="Resource"> <apple-fi:AngleInfoYaw>90</apple-fi:AngleInfoYaw> <apple-fi:AngleInfoRoll>0</apple-fi:AngleInfoRoll> <apple-fi:ConfidenceLevel>99</apple-fi:ConfidenceLevel> <apple-fi:Timestamp>2147483647</apple-fi:Timestamp> <apple-fi:FaceID>3</apple-fi:FaceID> </mwg-rs:Extensions> </rdf:li> </rdf:Seq> </mwg-rs:RegionList> <mwg-rs:AppliedToDimensions rdf:parseType="Resource"> <stDim:h>2448</stDim:h> <stDim:w>3264</stDim:w> <stDim:unit>pixel</stDim:unit> </mwg-rs:AppliedToDimensions> </mwg-rs:Regions> </rdf:Description> </rdf:RDF> </x:xmpmeta> ��� ��f���"��� }!1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������
w!1AQaq"2�B���� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?�ʌ�>c�����E��rw(f���?��������tų�-���)��|1��I'�sԓֿ��$�E�VzrK���J���})�-�(T�����W��&�g�rX������O����,���8�=^}�:i�\�.�=,#7����F9Páǵ6� ��'�^��z�sڸ$�u$;Uq� <��?Z�|O�7�d�S����{�J�%��'I��8#~���#P�w!olᏵr��m�X�w �?ʬ�.;��7�:u�U-F�e"�լW� W�y��*�S��j��8n*A�Ar|�8#�;3�,oĺ��� VR�Tb������^M��en?&<:�R���7���Ӟ��7��4ۘ�wj�w1��ҹ{�-[D�w�/p�����;u�)�<ێN��� B ?w���Z�ݦŊ>���j��J��֗Kk�Zб�T$��ǽz}��g}�h������ʄ�Ԫ-��$�̅����_lV�%L�By��:�k��Ԥ�DP6���Ҷ���؟ְt�c~uc�Yp[<r}ju�>�Fx�Z�K�Qx�?/l�T�j �gPx�)J�� F�� 6�Q���FNy�G���ݿ0�� G��&���U�)#aT�w��6�IsYGGv����� �݀I���ϵ,Nܠ���? ����z��>��f)�Nr�듁�֩l�m�h��G?�K��9� ��B6 �1���S!2Iԃ������I�)���X�����x��R��Q��T�p9�X��oz3F���5��8�f ���2��w㊢���[�Lո�á���j$ ��g�X�9䵹F����F?�b^h�x���W��[��y�;r3׾i2T�=�q�{�Y������{�����t�F�#X7� �������v���p)XpA��K� |d��|[�Ml|G�k��.!#���x\�6wDs���s�Ѕ�[���\&�t'���W�x����i�Z�k�����β(ttaʺ�AZ��� �/NZ��>{6�#Y�Gs����(��O?��ݍJ��sk&��������� $�b+<�{��R
q�9� �߱��� ���G�y06�^KX2���9h���|q�0,����}�t˘`�|h�ki�r�ޕ��n��z4w�����KR���Q��/:M�h�

��P�'��}�l�*Պ��e�x'3�=�\���2��n�h����q����Z�W�nؠdu�;����:��s�-�$���7�y�����E�jR'�1��?:�,Rl��1�g sϥ2ʋ�@R v���u����{X�s��}m�%�@bxR\z���f��S �X�X3���

Grez.Kev
  • 247
  • 1
  • 6
  • 17

2 Answers2

1

@Phil 's comment showed me I was way over complicating the situation. I created the url in the angular controller and used that in the ng-src. I removed the service completely and it works great.

Grez.Kev
  • 247
  • 1
  • 6
  • 17
0

Your response format above is not a base64 code, so there is now way it will be rendered as the image. Even if you try to encode your response content into base64 content, it still won't work. Please check what is stored on the server side and what is being returned.

Pramod_Para
  • 671
  • 3
  • 10