0

我尝试了很多次，但仍然无法添加图像。我想制作图片库并使用 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);
        }
    };
});
4

1 回答 1

0

您不能只将本地文件夹中的图像直接添加到您的代码中，您需要提供这些图像以便它们可以通过 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);
于 2017-02-26T18:40:21.607 回答