Fatal编程技术网
  • javascript/
  • Javascript 如何添加本地文件夹中的图像以在angularjs中进行无限滚动

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

javascript jquery angularjs

Javascript 如何添加本地文件夹中的图像以在angularjs中进行无限滚动,javascript,jquery,angularjs,nginfinitescroll,Javascript,Jquery,Angularjs,Nginfinitescroll,我尝试了很多次，但仍然无法添加图像。我想使用angularjs创建图像库并添加无限滚动的图像。如何从本地文件夹添加图像而不是从任何数据库添加图像 <body ng-app="infiniteScroll"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header">

我尝试了很多次，但仍然无法添加图像。我想使用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'，['infiniteScroll']）；
角度。模块（‘无限滚动’）。值（‘油门_毫秒’，250）；
app.controller（'scrolling'，函数（$scope，$http）{
$scope.images=[1,2,3,4,5,6,7,8,9,10,11,12]；
$scope.loadMore=函数（）{
var last=$scope.images[$scope.images.length-1]；

对于（var i=1；i您不能只将本地文件夹中的图像直接添加到代码中，您需要为这些图像提供服务，以便它们可以通过URI访问，如

如果在Mac/Linux上运行，实现这一点的最简单方法是使用类似Python simple server的东西，方法是从包含图像的目录中运行以下命令：


python -m SimpleHTTPServer 8080


现在，如果您在浏览器地址中打开，您可以找到图像的索引列表并使用它们的URL：


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


更新

一个简单的node.js程序，通过HTTP提供本地图像服务。
使用您的路径更新
imageDir
。打开可查看每页的图像，默认页面为1，可导航使用


var http=require（'http'）；
var fs=需要（'fs'）；
var path=require（'path'）；
var url=require（'url'）；
var imageDir='/Users/path/to/images'；
var-imagesPerPage=5；
var端口=8080；
变量主机=”http://localhost:“+港口
函数getImages（imageDir，回调）{
var文件=[]；
fs.readdir（imageDir，函数（err，list）{

对于（var i=0；iTo从本地文件夹中选择文件使用。好的，谢谢你的回复，但我如何在我的场景中管理它？？？困惑！！谢谢RomanMinkin，但如果我在$scope.images数组中使用localhost添加图像，那么它们只会第一次显示，不会像无限滚动或加载更多图像一样工作？我还必须问，添加图像的更好方法是什么s表示gallery使用服务器http或来自同一目录的文件夹？@Zeeshan，如果minimalistic infinitive scroll@Zeeshan我用一个简单的node.js程序更新了我的原始答案以满足您的需要，这里有一个很好的例子。使用上面的链接作为示例，说明如何使用infinitive scrolling来使用
？page=n
，并获取新的列表图片。希望有帮助；）

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



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);