-1
node33を使用してポート3333にローカルサーバーを作成しました。私の問題は、ローカルイメージを表示できないことです。外部画像を表示することができます。 Expressを使用せずにこれに対する解決策があると誰かが私に言うことができますか？そしてもしそうなら、その解決策は何でしょうか？私がしようとしているのはイメージを表示することだけですが、それは機能しません。私のコードにスタイルシートを追加する方法もありますか？node.jsサーバーを使用して画像を表示する方法は？
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;
\t \t 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'});
\t \t \t \t res.writeHead(200, {'Content-type':'text/html'})
\t \t \t \t //res.writeHead(200, {'Content-type':'text/html'})
\t \t \t \t //res.write("<link rel='stylesheet' href='style.css?v=123132'>")
\t \t \t \t
\t \t \t \t var pic_cuv = pic.replace('.png','.txt');
\t \t \t \t fs.readFile(imageDir + pic_cuv, function (errc, cuvcontent) {
\t \t \t \t \t if (!err) {
\t \t \t \t \t 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>");
\t \t \t \t \t var threeWords = cuvcontent.toString();
\t \t \t \t \t \t threeWords = threeWords.split('&h=250&w=1000&zc=0&q=100');
\t \t \t \t \t \t
\t \t \t \t \t \t //res.write(threeWords);
\t \t \t \t \t \t res.write("<div id='main-container' style='background: transparent url(data:image/png;base64,"+ new Buffer(content).toString('base64') +") no-repeat center;'>");
\t \t \t \t \t \t \t res.write('<img src="/images/top-band.png"/>');
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t res.write('<img src="data:image/jpeg;base64,/images/top-band.png')
\t \t \t \t \t \t \t res.write(new Buffer(content).toString('base64'));
\t \t \t \t \t \t \t res.write('"/>');
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t res.write('<ul id="words">');
\t \t \t \t \t \t \t \t for(var i=0; i<threeWords.length; i++){
\t \t \t \t \t \t \t \t \t //console.log(threeWords[i]);
\t \t \t \t \t \t \t \t \t if(threeWords[i]){
\t \t \t \t \t \t \t \t \t \t res.write('<li>');
\t \t \t \t \t \t \t \t \t \t \t res.write('<img src="' + threeWords[i] + '&h=250&w=1000&zc=0&q=100"/>');
\t \t \t \t \t \t \t \t \t \t res.write('</li>');
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t res.write('</ul>');
\t \t \t \t \t \t res.write("</div>");
\t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t /*res.write('<img src="data:image/jpeg;base64,')
\t \t \t \t \t \t \t res.write(new Buffer(content).toString('base64'));
\t \t \t \t \t \t \t res.write('"/>');*/
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t \t res.end();
\t \t \t \t });
}
});
}
}).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) {
\t
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);
});
}
使用： 'res.writeHead（200、{ 'のContent-Type'： '画像/ JPG'}） ; ' – JordanHendrix
また、あなたのコードは読みにくいです。私はあなたのパスが正しいことを確認するコードを使用せずに私のブラウザが私が要求している画像を送信しているかどうか最初に見ていただろう。 – jmugz3
なぜ実際のURLをdata-urlの一部として含めるのですか？ 'image/jpeg; base64、'の後のすべては、エンコードされたデータでなければなりません。 – Emissary