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���

5
  • Did you tested by directly setting the url to img? Commented Mar 21, 2017 at 5:21
  • The image is always set to $scope.imgstr. and displayed with <img ng-src="{{imgstr}}" /> That connection is fine, but it can't read the format of the image. Commented Mar 21, 2017 at 5:23
  • 1
    Why are you fetching the image via $http? Can't you simply do something like <img ng-src="{{dirInfo.template_directory}}quoteCalc/images/Upload/{{photoName}}">? Commented Mar 21, 2017 at 5:40
  • What you're saving in DB ? Commented Mar 21, 2017 at 5:52
  • Possible duplicate of How to return image from $http.get in AngularJS Commented Mar 21, 2017 at 6:28

2 Answers 2

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.

Sign up to request clarification or add additional context in comments.

Comments

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.