我如何從本地文件夾添加圖像，使無限滾動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

回答

相關問題