在 AngularJS 中加载图像目录答案

【问题标题】：Load directory of images in AngularJS在 AngularJS 中加载图像目录
【发布时间】：2015-05-11 03:01:29
【问题描述】：

我正在尝试在我的 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);
    });
});

角度控制器

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

【问题讨论】：

您在哪个特定部分遇到问题？问题有点太宽泛了。您是否在应用程序中注入了路由？什么是显示预期？
编辑了我的初始帖子
建议您将图像资产放在与 api 调用不同的目录中。 api 路由的路径与图像相同
但这是正确的目录，包括正确的文件名
对，但是您也有一个指向它的 api 路由，并且该路由没有另一个段，因此当您想要的只是图像时，它在 api 路由中失败。 Assets 和 api 不应该有相似的路径

标签： angularjs node.js

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的解释！但我和我的后端一样困惑。我想通过 REST 访问目录。而且我得到了正确的文件名和正确的目录。所以在我看来它有效，但仍然存在 404 错误。对不起，我的愚蠢，不想惹你生气
您的资产（图像）存储在/uploads/ 目录中具有指定ID 的子文件夹中。你在那里有真正的文件结构。但是在您的后端配置中，您有一个 REST 端点设置，它与您的资产目录具有相同的路径：app.get('/uploads/:id'...。因此，当您尝试通过文件系统中的路径访问图像时，它会被您的 REST API 捕获。您的 API 没有为 /uploads/someId/someImage.jpeg 定义任何内容，因此它返回 404。
因此，当您的 HTML 拥有 <img ng-src="uploads/{{projects._id}}/{{x}}" width="150" height="100"/> 时，您的 HTML 实际上是在发出 get 请求（就像 angular 一样），并且它在您的 API 中到达相同的 app.get('/uploads/:id'... 端点。
这让我很清楚，谢谢。那么如何以快捷方式访问我的本地？拥有文件名和 Id 目录就足够了。我已经将 API 端点更改为 'app.get("/getpics/:id,..'，但这并没有改变 ng-src 想要在 'localhost:1000/uploads/someID/filename.jpg' 中查找我的文件
类似这样的东西 - app.use('/uploads', express.static('uploads'));如果上传文件夹在您的应用根目录中。