angularjs - 在 AngularJS 中加载图像目录

Question

我正在尝试在我的 Angular 应用程序中实现图片库。我在这篇文章中管理了图片的上传: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);
    });
});

Angular Controller

$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>

控制台日志

干杯，Wandkleister。

Answer 1

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

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

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

例如:$http.get('/getUploadsDir/someID') - 返回 /uploads/someID

的文件列表