Question

我有api返回与userID相对应的图像。

返回图片的API代码：

public function getImage($id) {
        if(File::exists('uploads/'.$id.'.jpg')) {
            $image = File::get('uploads/'.$id.'.jpg');
            return Response::make($image, 200, array('content-type' => 'image/jpg'));
        } else {
            return Response::json(array('error'=>true,'details'=>'No image.'));
        }

}

获取图片的路线是“api / image / id”

AngularJS代码：

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

      $scope.image = function (id) {
             $http({
                              method: 'GET', 
                              url: server + 'api/image/' + id,
                            }).success(function(data){
                              console.log(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" />
 </div>

如果我给服务器路径的api路径然后我得到图像但是如果我在angularsjs代码中使用那个api路径，我没有得到图像，我得到这样的响应：

ޑB [TԎ{OQ（B'ձ3 ]ӴۯI �U+��=>��i�C�~o / * 2FH] Y]ƅԋʋjў

我不知道为什么会发生这种情况，如果有人知道，请告诉我。

Answer 1

喜欢 HarishR 说＆＃34;函数getImage（$ id）＆＃34; 应该返回路径而不是图片，在您的情况下，它将返回类似 - /uploads/id.jpg

的内容

如果您的代码将所有图片存储在usersd名称的uploads文件夹中，则不需要进行api调用

Answer 2

并在你的HTML中

<div class="artst-pic pull-left" ng-controller="imgCtrl">
       <img ng-src="uploads/{{q.UserID}}.jpg" class="img-responsive" />
 </div>

并从控制器中删除该功能......

如何使用angularjs使用图像形式json响应？

2 个答案: