-1
我已經使用node.js在端口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作爲數據url的一部分？ 'image/jpeg; base64，'後面的所有內容應該只是編碼數據。 – Emissary