如何从本地文件夹添加图像以在angularjs中无限滚动
如何从本地文件夹添加图像以在angularjs中无限滚动
提问于 2017-02-26 23:49:29
我尝试了很多次，但仍然无法添加图像。我想做图片库，并添加使用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);
}
};
});回答 1
Stack Overflow用户
发布于 2017-02-27 02:40:22
您不仅可以将本地文件夹中的图像直接添加到代码中，还需要提供这些图像，以便可以通过URI访问它们，如http://localhost/1.jpg
如果你在Mac/Linux上，最简单的方法是使用类似Python的简单服务器，从包含图像的目录中运行以下命令：
python -m SimpleHTTPServer 8080现在，如果你打开你的浏览器地址http://localhost:8080/，你可以找到你的图像的索引列表，并使用他们的urls：
$scope.images = [
http://localhost:8080/1.jpg,
http://localhost:8080/2.jpg,
http://localhost:8080/n.jpg
];更新
一个简单的node.js程序，它提供来自本地的图像与超文本传输协议。使用您的路径更新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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42470647
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号