在 AngularJS 中加载图像目录

我正在尝试在我的 Angular 应用程序中实现一个图片库。我已经在这篇文章中管理了图片的上传：文件上传：如果目录不存在则创建 https://stackoverflow.com/questions/30150646/file-upload-create-directory-if-it-doesnt-exist.
因此文件根据其目录放置在子目录中project_id。这很好用。
所以现在我想显示一个项目的整套图像。我如何根据以下内容访问子目录project_id如何以方便的方式显示一组图像？任何想法表示赞赏。

我尝试路由到子目录。 GET 请求看起来没问题，project_id 已发送到路由。我可以使用 HTTP 200 代码访问该目录，但无法显示图像，会收到 404 错误。

app.get('/uploads/:id', function (req, res, next){
    fs.readdir('uploads/'+req.params.id+'/', function (err, files){
        if (err) return next (err);
        res.send(files);
    });
});

角度控制器

$http.get('/profile/project/').then(function (res){
    $scope.projects = res.data;
    $rootScope.projectId = $scope.projects._id;
    console.log($scope.projectId);
    var id = $rootScope.projectId;
    console.log("Rausgezogene ID: " + id);
    $http.get('/uploads/'+id).success(function (files){
        $scope.img = files;
    });
});

显示中

<li ng-repeat="x in img">
    <img ng-src="uploads/{{projects._id}}/{{x}}" width="150" height="100"/>
</li>

控制台日志

干杯，万德克莱斯特。

你基本上混淆了你的后端。 您需要将图像放置在没有 REST 端点的其他位置。当您请求获取图像以便显示它时，您的 API 并不知道这一点。它认为您正在尝试访问 REST 端点。

将图像放在某处，例如/public/images如果您使用公共文件夹或类似的文件夹，但没有为其配置端点 - 只是一个常规文件夹，但可公开访问。

或者您可以将其保留在上传中并将您的 api 端点更改为其他内容。只需让它返回相同的目录列表即可。

例如：$http.get('/getUploadsDir/someID')- 返回文件列表/uploads/someID