我如何从本地文件夹添加图像，使无限滚动angularjs

我尝试了很多次，但仍无法添加图像。我想制作图像库并使用angularjs添加无限滚动图像。我怎样才能从本地文件夹添加图像不是从任何数据库是可能的？我如何从本地文件夹添加图像，使无限滚动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); 
     } 
    }; 
});

来源

2017-02-26 Zeeshan

从本地文件夹中选择的文件使用[]（https：//开头developer.mozilla.org/en-US/docs/Web/HTML/Element/input#File_inputs）。 – georgeawg

好的谢谢你的答复，但我怎么可以在我的情况下管理？困惑！！ – Zeeshan

你不能只添加图片来自本地文件夹直接到你的代码，您需要为这些图像，使他们可以通过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 
];

UPDATE

一个简单的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);

来源

2017-02-26 18:40:21 RomanMinkin

谢谢RomanMinkin，但如果我添加图像使用localhost在$ scope.images数组然后他们将只显示第一次不会像infinit滚动或加载更多的工作？ – Zeeshan

我也不得不问，什么是更好的方法来使用服务器http或从文件夹添加图像作为相同的目录图像？ – Zeeshan

@Zeeshan，这是一个很好的例子，如果简约不定式滚动https://sroze.github.io/ngInfiniteScroll/demo_async.html – RomanMinkin

我如何从本地文件夹添加图像，使无限滚动angularjs

回答

相关问题