我正在尝试从后端api访问图像。这些图像在aws s3中，它们是私有的。所以我尝试访问图像并显示在前端（angularjs）。但也有很多错误。我想用方法注入src值。我为s3配置编写了一个工厂服务。代码在fiddel中（您可以编辑）。这是api（get）：https://alsback.immersionslabs.com/alscourses/getallcourses

var app = angular.module("app", ["ui.router"]);
app.factory("photo", function() {
  var photosFactory = {};
  photosFactory.getimages = function(val) {
    console.log("Getimage Service Invoked");
    var albumBucketName = "alsresources";
    AWS.config.update({
      accessKeyId: "<ACCESS KEY>",
      secretAccessKey: "<SECRET KEY>",
      region: "ap-south-1",
    });
    var s3 = new AWS.S3({
      apiVersion: "2006-03-01",
      params: {
        Bucket: albumBucketName
      },
    });
    var pathname = new URL(val).pathname;
    var path = pathname.substring(1);
    var als;
    return new Promise((resolve, reject) => {
      s3.getObject({
        Key: path
      }, function(err, file) {
        if (err) {
          reject("Some Error With S3" + err);
        } else {
          console.log(file.Body);
          als = "data:image/jpeg;base64," + encode(file.Body);
          resolve(als);
        }
      });
    });

    function encode(data) {
      var str = data.reduce(function(a, b) {
        return a + String.fromCharCode(b);
      }, "");
      return btoa(str).replace(/.{76}(?=.)/g, "$&\n");
    }
  };
  return photosFactory;
});
app.controller("mainController", function($scope, $http, photo) {
  console.log("Image Controller");

  $scope.getAllCourse = function() {
    $http.get("https://alsback.immersionslabs.com" + "/alscourses/getallcourses", {
        transformRequest: angular.identity,
        headers: {
          "Content-Type": undefined
        }
      })
      .then(function(data) {
        $scope.courseDetails = data.data.Data
        console.log($scope.courseDetails)
      })
      .catch(function(data) {
        {
          console.log(data)
        }
      })
  }
  $scope.getAllCourse();

  $scope.image = (val) => {
    return photo.getimages(val)
  }

});

<div ng-app="app" ng-controller="mainController">
  Load Multiple Images From S3 From API using Keys
  <hr>
  <div ng-repeat="x in courseDetails">
    {{$index+1}}
    <p>
      {{x.CourseName}}
    </p>
    <image src="image({{x.CourseImage}})"></image>
    <hr>
  </div>
</div>