我使用node.js在端口3333上创建了一个本地服务器。我的问题是我无法显示本地图像。可以显示外部图像。有人可以告诉我，如果没有使用Express可以解决这个问题吗？如果是，那解决方案是什么？我所要做的就是显示图像，但它不起作用。还有一种方法可以在我的代码中添加样式表吗？
使用Express是否可以使用现有节点服务器加载文件？
我试图显示本地图像的代码（我尝试过和其他解决方案，你可以在我的整个代码中看到，没有运气）：
res.write('<img src="data:image/jpeg;base64,http://localhost:3333/images/top-band.png')
res.write(new Buffer(content).toString('base64'));
res.write('"/>');
这里的整个代码：
//include http, fs and url module
var http = require('http'),
fs = require('fs'),
path = require('path'),
url = require('url');
imageDir = 'C:/Users/Ionut/maguay/node/';
//create http server listening on port 3333
http.createServer(function (req, res) {
//use the url to parse the requested url and get the image name
var query = url.parse(req.url,true).query;
pic = query.image;
console.log(pic);
if (typeof pic === 'undefined') {
getImages(imageDir, function (err, files) {
var imageLists = '<ul style="padding: 0; margin: 0;">';
for (var i=0; i<files.length; i++) {
imageLists += '<li style="list-style-type: none;"><a href="/?image=' + files[i] + '"><img src="http://localhost:3333/' + files[i] + '"></li>';
}
imageLists += '</ul>';
res.writeHead(200, {'Content-type':'text/html'});
res.end(imageLists);
});
} else {
//read the image using fs and send the image content back in the response
fs.readFile(imageDir + pic, function (err, content) {
if (err) {
res.writeHead(400, {'Content-type':'text/html'})
console.log(err);
res.end("No such image");
} else {
//specify the content type in the response will be an image
//res.writeHead(200,{'Content-type':'image/png'});
res.writeHead(200, {'Content-type':'text/html'})
//res.writeHead(200, {'Content-type':'text/html'})
//res.write("<link rel='stylesheet' href='style.css?v=123132'>")
var pic_cuv = pic.replace('.png','.txt');
fs.readFile(imageDir + pic_cuv, function (errc, cuvcontent) {
if (!err) {
res.write("<style>body{margin: 0; padding: 0;} #main-container{ margin: 0 auto; width: 1520px; height: 1000px; display: table-cell; vertical-align: middle;} @media print{* {-webkit-print-color-adjust:exact;}} #words{padding:0; margin: 0; display: inline-block;} #words li{ list-style-type: none; display: inline-block; width: 33.33%;} #words li img{ width: 100%; }</style>");
var threeWords = cuvcontent.toString();
threeWords = threeWords.split('&h=250&w=1000&zc=0&q=100');
//res.write(threeWords);
res.write("<div id='main-container' style='background: transparent url(data:image/png;base64,"+ new Buffer(content).toString('base64') +") no-repeat center;'>");
res.write('<img src="/images/top-band.png"/>');
res.write('<img src="data:image/jpeg;base64,/images/top-band.png')
res.write(new Buffer(content).toString('base64'));
res.write('"/>');
res.write('<ul id="words">');
for(var i=0; i<threeWords.length; i++){
//console.log(threeWords[i]);
if(threeWords[i]){
res.write('<li>');
res.write('<img src="' + threeWords[i] + '&h=250&w=1000&zc=0&q=100"/>');
res.write('</li>');
}
}
res.write('</ul>');
res.write("</div>");
/*res.write('<img src="data:image/jpeg;base64,')
res.write(new Buffer(content).toString('base64'));
res.write('"/>');*/
}
res.end();
});
}
});
}
}).listen(3333);
console.log("Server running at http://localhost:3333/");
//get the list of png files in the image dir
function getImages(imageDir, callback) {
var fileType = '.png',
files = [], i;
fs.readdir(imageDir, function (err, list) {
for(i=0; i<list.length; i++) {
if(path.extname(list[i]) === fileType) {
files.push(list[i]); //store the file name into the array files
}
}
callback(err, files);
});
}
答案 0 :(得分：0)
不要再回答我的问题。我已经完成了使用Express.js做的事情。
工作代码：
//include http, fs and url module
var express = require('express'),
http = express(),
//http = require('http'),
fs = require('fs'),
path = require('path'),
url = require('url');
imageDir = 'C:/Users/Ionut/maguay/node/public/uploaded/';
http.use(express.static('public'));
//create http server listening on port 3333
http.get('/', function (req, res) {
//use the url to parse the requested url and get the image name
var query = url.parse(req.url,true).query;
pic = query.image;
console.log(pic);
if (typeof pic === 'undefined') {
getImages(imageDir, function (err, files) {
var imageLists = '<ul style="padding: 0; margin: 0;">';
for (var i=0; i<files.length; i++) {
console.log(files[i]);
imageLists += '<li style="list-style-type: none;"><a href="/?image=' + files[i] + '"><img src="http://localhost:3333/uploaded/' + files[i] + '"></li>';
}
imageLists += '</ul>';
res.writeHead(200, {'Content-type':'text/html'});
res.end(imageLists);
});
} else {
//read the image using fs and send the image content back in the response
fs.readFile(imageDir + pic, function (err, content) {
if (err) {
res.writeHead(400, {'Content-type':'text/html'})
console.log(err);
res.end("No such image");
} else {
//specify the content type in the response will be an image
res.writeHead(200, {'Content-type':'text/html'})
res.write("<link rel='stylesheet' href='http://localhost:3333/css/style.css?v=2323243'>")
var pic_cuv = pic.replace('.png','.txt');
fs.readFile(imageDir + pic_cuv, function (errc, cuvcontent) {
if (!err) {
//I'm spliting the words by making use of "&h=250&w=1000&zc=0&q=100"
var threeWords = cuvcontent.toString();
threeWords = threeWords.split('&h=250&w=1000&zc=0&q=100');
res.write("<div id='main-container' style='background: transparent url(data:image/png;base64,"+ new Buffer(content).toString('base64') +") no-repeat center;'>");
res.write('<img id="top-nav" src="http://localhost:3333/images/top-band.png"/>');
res.write('<ul id="words">');
for(var i=0; i<threeWords.length; i++){
if(threeWords[i]){
//displaying the chosen words
res.write('<li>');
res.write('<img src="' + threeWords[i] + '&h=250&w=1000&zc=0&q=100"/>');
res.write('</li>');
}
}
res.write('</ul>');
//name of the event
res.write('<p id="event_name">@Eveniment</p>');
res.write("</div>");
/*res.write('<img src="data:image/jpeg;base64,')
res.write(new Buffer(content).toString('base64'));
res.write('"/>');*/
}
res.end();
});
}
});
}
}).listen(3333);
console.log("Server running at http://localhost:3333/");
//get the list of png files in the image dir
function getImages(imageDir, callback) {
var fileType = '.png',
files = [], i;
fs.readdir(imageDir, function (err, list) {
for(i=0; i<list.length; i++) {
if(path.extname(list[i]) === fileType) {
files.push(list[i]); //store the file name into the array files
}
}
callback(err, files);
});
}