javascript - $http.get从jpg到img

Question

我正在尝试使用 $http.get 加载一张图像，因为它稍后会来自服务器，但我真的不知道该怎么做:/

我现在的代码是:

在服务中我得到这样的:

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

这会返回给我一个 promise ，其中包含如下二进制数据: ���� 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�&�ϻ��s l� ��Z�.�6-��-�r�R�hK ;����֮�T!����k����R[�Muw�E KO���C�����p��(LJ �nUjul�5m�v>}��������x�c]��+刈($(����(�� s{�g��y���0�w'���#^d�i�k I>�'W JpJQ������^�} :��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= �&�θ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�5�9�=p���-������ٽ� �m�q�E(��K%�]ż[w�gѾ�+%�m ��l8^�Vn ��!@������

这只是其中的一部分...长度为 12500...

在 Controller 上我像这样解析为base64:

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

其中图像是 promise 的响应，数据是我上面放置的二进制文件所在的位置。

我的观点如下:

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

所以，任何人都知道如何解决这个问题

Answer 1

我终于明白那是什么了。

我在没有标题的情况下调用 $http get ，因此它没有返回给我 bufferArray 而是一个字符串，我用以下方法修复了:

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;

然后在 Controller 中你只调用promise的返回并抛出像这样的img内

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