无法使用 angularJS 获取图像作为 json 响应？答案

【问题标题】：Not able to get image as json response using angularJS?无法使用 angularJS 获取图像作为 json 响应？
【发布时间】：2014-09-01 15:24:37
【问题描述】：

我在 json 响应形式的 restful api 中获取图像，我必须使用 angularjs 在 html 中使用该图像。

我不知道如何使用 angularJs 使用该图像

如果我尝试这样 "http:/api/image/id"，其中 id 是 "userID"。但是当我在 angularjs 中编写代码时，我没有得到任何响应。我尝试使用断点调试代码，但它没有进入函数内部

JS 代码

QAApp.controller('imgCtrl', function ($scope, $http) {
  $scope.image = function (id) {
       var request = $http({
                          method: 'GET', 
                          url: server + 'api/image/' + id,
                        });
            request.success(function(data, status, headers, config) {
              console.log(data);

            });
          }
      });

HTML 代码

<div class="artst-pic pull-left" ng-controller="imgCtrl">
      <img ng-show = "{{image(q.userID)}}" alt="" class="img-responsive" />K
</div>

请告诉我如何使用它。

【问题讨论】：

如果你能发布你的 JSON 的样子会有所帮助。
我无法发布 json 响应，通过使用此 url localhost:8000/api/image/id，然后它将直接显示图像而不是 url，所以我必须显示该图像...我没有得到任何解决方案我如何使用它............哪里 /api/image/id 这是 api 路径......
对象 {数据：“��JFIFHH��ExifMM*...��f�*�c#��B��z��h� ��)Ob��5��o�QY��", status: 200, headers: function, config: Object}..... 我收到这样的 json 响应

标签： angularjs

【解决方案1】：

据我了解，API 直接向您发送图像，而不是任何 JSON..

然后就像显示任何图像一样显示它（你不需要 ajax）：

$scope.image = function (id) {
    return server + 'api/image/' + id;
};

HTML

<img ng-src="{{image(q.userID)}}"/>

【讨论】：

取决于您是否有权访问服务器端代码。无论如何，我鼓励您发布一个新问题，提供有关该问题的更多信息。
我无权访问服务器端，如果图像不存在，则 API 路径返回 json 响应并显示“未找到图像”，所以如果当时出现此消息，我必须使用虚拟图像....

【解决方案2】：

Javascript

QAApp.controller('imgCtrl', function ($scope, $http) {

      $scope.image = function (id) {
             $http({
                              method: 'GET', 
                              url: server + 'api/image/' + id,
                            }).then(function(data){
                             $scope.imageUrl= data; // if you sure what data is you URL 
                       })
              }
          });

HTML

<div class="artst-pic pull-left" ng-controller="imgCtrl">
      <img ng-src="{{imageUrl}}" ng-init="image(q.userID)" alt="" class="img-responsive" />K
</div>

【讨论】：

请告诉我该怎么做，我也发布了我的json响应，请看，我该如何解决这个问题

【解决方案3】：

Apache Roller 源代码有一个使用 angular.js 引入图像源的示例：http://svn.apache.org/viewvc/roller/trunk/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp?annotate=1621546（第 126 行，JavaScript 位于文件底部）。

【讨论】：