如何从本地文件夹添加图像以在 angularjs 中进行无限滚动答案

【问题标题】：How I can add images from local folder to make infinite scrolling in angularjs如何从本地文件夹添加图像以在 angularjs 中进行无限滚动
【发布时间】：2017-02-28 05:18:18
【问题描述】：

我尝试了很多次，但仍然无法添加图像。我想制作图片库并使用 angularjs 添加图片以进行无限滚动。如何从本地文件夹而不是任何数据库添加图像？

<body ng-app="infiniteScroll">
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">Infinite scroll in Angular js</a>
        </div>
    </div>
</nav>
<div role="main" class="container theme-showcase" ng-controller="scrolling">
    <div class="main-wrapper">
        <div class="row" infinite-scroll='loadMore()'>
            <div class="col-xs-6 col-md-3" ng-repeat='image in images'>
                <a class="thumbnail">
                    <img ng-src="*how to add local images here*" alt="{{image}}">
                </a>

            </div>
        </div>
    </div>
</div>

var app = angular.module('infiniteScroll', ['infinite-scroll']);

angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250);

app.controller('scrolling',function($scope, $http){

    $scope.images = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

    $scope.loadMore = function() {
        var last = $scope.images[$scope.images.length - 1];
        for(var i = 1; i <= 12; i++) {
            $scope.images.push(last + i);
        }
    };
});

【问题讨论】：

要从本地文件夹中选择文件，请使用<input type="file" multiple />。
好的，谢谢你的回复，但我怎么能在我的场景中管理它？？？迷茫！！

标签： javascript jquery angularjs nginfinitescroll

【解决方案1】：

您不能只将本地文件夹中的图像直接添加到您的代码中，您需要提供这些图像以便它们可以通过 URI 访问，例如 http://localhost/1.jpg

如果你在 Mac/Linux 上，最简单的实现方法是使用 Python 简单服务器之类的东西，方法是从带有图像的目录中运行以下命令：

python -m SimpleHTTPServer 8080

现在，如果您在浏览器地址中打开http://localhost:8080/，您可以找到您的图片的索引列表并使用他们的网址：

$scope.images = [
     http://localhost:8080/1.jpg,
     http://localhost:8080/2.jpg,
     http://localhost:8080/n.jpg
];

更新

一个简单的 node.js 程序，它使用 HTTP 从本地提供图像。使用您的路径更新imageDir。打开http://localhost:8080查看每页图片，默认页面为1，导航使用http://localhost:8080/?page=2

var http = require('http');
var fs = require('fs');
var path = require('path');
var url = require('url');

var imageDir = '/Users/path/to/images';
var imagesPerPage = 5;

var port = 8080;
var host = "http://localhost:"+port


function getImages(imageDir, callback) {
    var files = [];

    fs.readdir(imageDir, function (err, list) {
        for(var i=0; i<list.length; i++) {
            if(path.extname(list[i]).match(/.(jpg|jpeg|png|gif)$/i)) {
                files.push(list[i]);
            }
        }
        callback(err, files);
    });
}


http.createServer(function (req, res) {
    var parsedUrl = url.parse(req.url, true);
    var page = parsedUrl.query.page;


    // Simple router
    if (parsedUrl.pathname === '/') {
        // Returning JSON array of files per page
        if (typeof page === 'undefined' ||  page <= 1) {
            page = 1
        }

        getImages(imageDir, function (err, files) {
            var out = [];
            var i = (page-1)*imagesPerPage; // will be 0 for the first page
            var limit = i + imagesPerPage

            if (limit < files.length) {
                for (i; i<limit; i++) {
                    out.push({
                        name: files[i],
                        url: host +"/"+ encodeURIComponent(files[i])
                    })
                }
            }

            res.writeHead(200, {'Content-type':'application/json'});
            res.end(JSON.stringify(out));
        });

    } else {
        // Returning an image
        fs.readFile(imageDir + decodeURIComponent(parsedUrl.path), function (err, content) {
            if (err) {
                res.writeHead(404, {'Content-type':'text/html'})
                res.end("File not found");
            } else {
                res.writeHead(200,{'Content-type':'image/jpg'});
                res.end(content);
            }
        });
    }


}).listen(port);

console.log("Server running at " + host);

【讨论】：

谢谢 RomanMinkin，但如果我使用 localhost 在 $scope.images 数组中添加图像，那么它们只会在第一次显示时不会像无限滚动或加载更多那样工作？
我还得问，使用服务器 http 或从文件夹作为同一目录添加图片的更好方法是什么？
@Zeeshan，这是一个很好的例子，如果简约不定式滚动sroze.github.io/ngInfiniteScroll/demo_async.html
@Zeeshan 我用一个简单的 node.js 程序更新了我的原始答案，以满足您的需求。使用上面的链接作为示例，了解如何进行不定式滚动以使用 ?page=n 并拉取新的图像列表。希望有帮助;)