$http.get from jpg to img

Question

I'm trying to load one image with $http.get because it'll later come from the server, and I dont really know what to do:/

the code I have now is:

in the service i get like this:

return $http.get('resources/mock-data/image.jpg', {
      headers: {
        'Content-Type': 'image/jpg'
      }
    });

that returns me a promisse, that comes with a binary data like this: ��JFIF�� ( %!1!%),...383,7(-.+

,$&,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,��K!1AQ"aq��2��BRr�#3b��$4S��Ccst��5D��< !1AQ"aq��2��3Br�#$4b�C��R��?�� Ԑ-�o>�vJ4�>�aW�s̯��I�&��ϻ��sl��Z��.�6-��-�r�R�hK;��֮�T!� �k��R [�Muw�EKO��Cً��p��(LJ ��nUjul�5m�v>}�ԙҺʵ��ڸ��x��c]��+ Ո ($(��(�s{�g��y��0�w'��#^d�i�k I>�'WJpJQ��^�}:��c�g#�G�^��5N��v<�ҡ��i��fJ�k�ul��9��6zKe��٘|Zۭ��W��)�'�:�j�L�qU�x��b��9RVg5�� (jI5AV\F�\�1�4�G�� 9� (� h�k9�#H+��1�sȂ��K��@{�\�W)T]#��m�Ӕ�U��_��B=�&�a��Θx�l�]nΛfX_2y8��Q��4\�+�O��0!�~̱�t;��K^�+��5��_H�UQ��v��k��&;��RV�ó��I�x��]��2ڟB� Ԑ% (@�,��E:5&.P��{R��IŘ��R:8|4��ػ��H�0X W�r��5�l�g�G��p��l��Ǜ1�� V��0�{'�� C�ʴ�#�M�~͟��i�>I�ÿ��0�-}��<��5�V��JT�v��f3�b;��Vg3��P@�@!�%/lk�S��ᔂʘx�۵�9�=p��-��ٽ��m�q��E(��K%�]ż[w�gѾ�+%�m�l8^�Vn��!@��қ��

that is just a part of it... it is 12500 of length...

on the controller i get like this to parse to base64:

var base64 = 'data:image/jpg;base64,' + btoa(unescape(encodeURIComponent(image.data)))
  console.log(base64);
  $scope.fullImage = base64;

where the image is the response of the promisse, and data is where the binary i putted above is.

my view has the following:

  <img ng-src="{{fullImage}}" class="coolin_home_full_image"/>

so, anybody has any idea on how to fix this

no because thats a mock, it will later become a get to the server and the image is not static — Thiago Kairala, Oct 13 '15 at 23:41
Possible duplicate of [How to return image from $http.get in AngularJS](http://stackoverflow.com/questions/29780147/how-to-return-image-from-http-get-in-angularjs) — Jorg, Oct 13 '15 at 23:42
I don't understand what you mean. It is already a "get to the server"...You mean the service is returning JSON with the binary data as a property? — Malk, Oct 13 '15 at 23:51

score 1 · Accepted Answer · answered Oct 14 '15 at 12:33

I finally figured out what was it.

I was calling the $http get without the header, so it was not returning me a bufferArray but a string, i fixed with:

var deferred = $q.defer();
    var promise = deferred.promise;
    $http.get('resources/mock-data/image.jpg', {}, {
      headers: {
        'Content-Type': 'image/jpg'
      },
      responseType: 'blob'
    }).then(function(image) {
      var blob = new Blob([image.data], {
        type: 'image/jpeg'
      });
      var fr = new FileReader();
      fr.onload = function() {
        deferred.resolve(fr.result);
      };
      fr.readAsDataURL(blob);
    }, function(error) {
      deferred.reject(error);
    });

    return promise;

and then in the controller you call just the return of the promise and throws inside a img like

<img ng-src="{{fullImage}}" />

$http.get from jpg to img

1 Answers1

Linked