public / images / logo.gifにあるロゴがあります。これが私のnodejsコードです。
http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/plain' });
res.end('Hello World \n');
}).listen(8080, '127.0.0.1');機能しますが、localhost：8080 / logo.gifを要求すると、ロゴが表示されません。
画像を配信するために必要な変更
回答:
この質問は5年以上前のものですが、すべての回答にいくつかの問題があります。
下にスクロールして、画像を提供する例を示します。
express.staticexpressconnecthttpnetすべての例はGitHubにもあります：https : //github.com/rsp/node-static-http-servers
テスト結果はTravisで入手できます：https : //travis-ci.org/rsp/node-static-http-servers
この質問が出されてから5年以上が経ちましたが、generalhenryの正解は1つだけですが、その答えはコードに問題はありませんが、受信に問題があるようです。それは「仕事を成し遂げるために他の誰かに頼る方法以外はあまり説明しない」とコメントされ、多くの人々がこのコメントに投票したという事実は多くのことが明確化を必要とすることを明らかに示しています。
まず、「Node.jsを使用して画像を提供する方法」に対する適切な答えは、静的ファイルサーバーを最初から実装するのではなく、ひどいことです。良い答えは、正しく機能する Expressのようなモジュールを使用することです。
Expressを使用すると「他の人に頼って仕事を終わらせる方法以外はあまり説明されない」というコメントに答えると、httpモジュールの使用はすでに他の人に頼って仕事を終えていることに注意してください。誰かが誰かに頼って仕事をやりたくない場合は、代わりに少なくとも生のTCPソケットを使用する必要があります。これは、以下の私の例の1つで行います。
より深刻な問題は、httpモジュールを使用するここでのすべての回答が壊れていることです。彼らは、紹介、レース条件、安全でないパスの解決につながるパストラバーサルの脆弱性、I / Oをブロックし、完全になります任意の同時要求提供するために失敗し、彼らが完全に質問がについて尋ねるものの例として壊れている、と-すべておよびその他の微妙な問題ではしかし、httpTCPソケットを使用する代わりに、モジュールが提供する抽象化をすでに使用しているため、要求どおりに最初からすべてを実行することすらありません。
質問が「静的ファイルサーバーを最初から実装する方法、学習課題として」である場合、それを実行する方法は必ず回答されますが、それでも、少なくとも正しいことが期待されます。また、画像を提供したい人が将来さらに多くの画像を提供したいと思うので、ハードコードされたパスを持つ単一のファイルのみを提供できる特定のカスタム静的ファイルサーバーを書くことは、やや近視。画像を提供する方法についての回答を検索する人が、画像を提供する一般的なソリューションではなく、単一の画像のみを提供するソリューションで満足することは想像に難く思えます。
要するに、問題は、画像をどのように提供するかであり、その答えは、適切なモジュールを使用して、プロフェッショナルノードのベストプラクティスを使用しながら、読み取り可能で、保守可能で、将来も保証された、安全で予備的かつ信頼できる方法でそれを実行することです。開発。しかし、私はそのような答えに大きな追加が同じ機能を手動で実装する方法を示すことになることに同意しますが、残念ながらそれを行うすべての試みはこれまで失敗しました。そしてそれが私がいくつかの新しい例を書いた理由です。
この短い紹介の後、5つの異なる抽象化レベルで作業を行う5つの例を示します。
すべての例は、publicディレクトリからファイルを提供し、以下の最小機能をサポートしています。
index.htmlデフォルトのディレクトリインデックスとして機能しますNodeバージョン4、5、6、7ですべてのバージョンをテストしました。
express.staticこのバージョンはexpress.static、expressモジュールの組み込みミドルウェアを使用します。
この例では、ほとんどの機能と最小限のコードを使用しています。
var path = require('path');
var express = require('express');
var app = express();
var dir = path.join(__dirname, 'public');
app.use(express.static(dir));
app.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});expressこのバージョンはexpressモジュールを使用しますが、express.staticミドルウェアはありません。静的ファイルの提供は、ストリームを使用する単一のルートハンドラーとして実装されます。
この例には、単純なパストラバーサル対策があり、最も一般的なMIMEタイプの限定されたセットをサポートしています。
var path = require('path');
var express = require('express');
var app = express();
var fs = require('fs');
var dir = path.join(__dirname, 'public');
var mime = {
html: 'text/html',
txt: 'text/plain',
css: 'text/css',
gif: 'image/gif',
jpg: 'image/jpeg',
png: 'image/png',
svg: 'image/svg+xml',
js: 'application/javascript'
};
app.get('*', function (req, res) {
var file = path.join(dir, req.path.replace(/\/$/, '/index.html'));
if (file.indexOf(dir + path.sep) !== 0) {
return res.status(403).end('Forbidden');
}
var type = mime[path.extname(file).slice(1)] || 'text/plain';
var s = fs.createReadStream(file);
s.on('open', function () {
res.set('Content-Type', type);
s.pipe(res);
});
s.on('error', function () {
res.set('Content-Type', 'text/plain');
res.status(404).end('Not found');
});
});
app.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});connectこのバージョンconnectは、1つ下のレベルの抽象化であるモジュールを使用しますexpress。
この例は、expressバージョンと同様の機能を備えていますが、レバーが少し低いAPIを使用しています。
var path = require('path');
var connect = require('connect');
var app = connect();
var fs = require('fs');
var dir = path.join(__dirname, 'public');
var mime = {
html: 'text/html',
txt: 'text/plain',
css: 'text/css',
gif: 'image/gif',
jpg: 'image/jpeg',
png: 'image/png',
svg: 'image/svg+xml',
js: 'application/javascript'
};
app.use(function (req, res) {
var reqpath = req.url.toString().split('?')[0];
if (req.method !== 'GET') {
res.statusCode = 501;
res.setHeader('Content-Type', 'text/plain');
return res.end('Method not implemented');
}
var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
if (file.indexOf(dir + path.sep) !== 0) {
res.statusCode = 403;
res.setHeader('Content-Type', 'text/plain');
return res.end('Forbidden');
}
var type = mime[path.extname(file).slice(1)] || 'text/plain';
var s = fs.createReadStream(file);
s.on('open', function () {
res.setHeader('Content-Type', type);
s.pipe(res);
});
s.on('error', function () {
res.setHeader('Content-Type', 'text/plain');
res.statusCode = 404;
res.end('Not found');
});
});
app.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});httpこのバージョンでは、httpNodeのHTTPの最低レベルのAPIであるモジュールを使用します。
この例には、connectバージョンと同様の機能がありますが、さらに低いレベルのAPIを使用しています。
var path = require('path');
var http = require('http');
var fs = require('fs');
var dir = path.join(__dirname, 'public');
var mime = {
html: 'text/html',
txt: 'text/plain',
css: 'text/css',
gif: 'image/gif',
jpg: 'image/jpeg',
png: 'image/png',
svg: 'image/svg+xml',
js: 'application/javascript'
};
var server = http.createServer(function (req, res) {
var reqpath = req.url.toString().split('?')[0];
if (req.method !== 'GET') {
res.statusCode = 501;
res.setHeader('Content-Type', 'text/plain');
return res.end('Method not implemented');
}
var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
if (file.indexOf(dir + path.sep) !== 0) {
res.statusCode = 403;
res.setHeader('Content-Type', 'text/plain');
return res.end('Forbidden');
}
var type = mime[path.extname(file).slice(1)] || 'text/plain';
var s = fs.createReadStream(file);
s.on('open', function () {
res.setHeader('Content-Type', type);
s.pipe(res);
});
s.on('error', function () {
res.setHeader('Content-Type', 'text/plain');
res.statusCode = 404;
res.end('Not found');
});
});
server.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});netこのバージョンは、netNodeのTCPソケットの最低レベルのAPIであるモジュールを使用します。
この例には、httpバージョンの機能の一部が含まれていますが、最小限の不完全なHTTPプロトコルが最初から実装されています。チャンクエンコーディングをサポートしていないため、ファイルを統計してからロードすると競合状態が発生するため、応答を送信する前にサイズを確認する前にファイルをメモリにロードします。
var path = require('path');
var net = require('net');
var fs = require('fs');
var dir = path.join(__dirname, 'public');
var mime = {
html: 'text/html',
txt: 'text/plain',
css: 'text/css',
gif: 'image/gif',
jpg: 'image/jpeg',
png: 'image/png',
svg: 'image/svg+xml',
js: 'application/javascript'
};
var server = net.createServer(function (con) {
var input = '';
con.on('data', function (data) {
input += data;
if (input.match(/\n\r?\n\r?/)) {
var line = input.split(/\n/)[0].split(' ');
var method = line[0], url = line[1], pro = line[2];
var reqpath = url.toString().split('?')[0];
if (method !== 'GET') {
var body = 'Method not implemented';
con.write('HTTP/1.1 501 Not Implemented\n');
con.write('Content-Type: text/plain\n');
con.write('Content-Length: '+body.length+'\n\n');
con.write(body);
con.destroy();
return;
}
var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
if (file.indexOf(dir + path.sep) !== 0) {
var body = 'Forbidden';
con.write('HTTP/1.1 403 Forbidden\n');
con.write('Content-Type: text/plain\n');
con.write('Content-Length: '+body.length+'\n\n');
con.write(body);
con.destroy();
return;
}
var type = mime[path.extname(file).slice(1)] || 'text/plain';
var s = fs.readFile(file, function (err, data) {
if (err) {
var body = 'Not Found';
con.write('HTTP/1.1 404 Not Found\n');
con.write('Content-Type: text/plain\n');
con.write('Content-Length: '+body.length+'\n\n');
con.write(body);
con.destroy();
} else {
con.write('HTTP/1.1 200 OK\n');
con.write('Content-Type: '+type+'\n');
con.write('Content-Length: '+data.byteLength+'\n\n');
con.write(data);
con.destroy();
}
});
}
});
});
server.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});すべての例をGitHubに詳細な説明とともに投稿しました。
例とexpress.static、express、connect、httpとnet：
のみを使用する他のプロジェクトexpress.static：
テスト結果はTravisで入手できます。
すべてがNodeバージョン4、5、6、7でテストされています。
その他の関連する回答：
express.staticと、URLを呼び出して画像を取得できるhttp://ip:port/path_after_the_static_folderので、画像を提供するために静的フォルダー自体について言及する必要がありません。app.use('/static', express.static(imagePath))便宜上、parjの
最終的にExpressなどのフレームワークを使用する必要があるという他のポスターにも同意します。しかし、最初に、ライブラリなしでこのような基本的なことを行う方法を理解し、ライブラリが抽象化するものを本当に理解する必要があります。ステップは
コードは次のようになります（テストされていません）
fs = require('fs');
http = require('http');
url = require('url');
http.createServer(function(req, res){
var request = url.parse(req.url, true);
var action = request.pathname;
if (action == '/logo.gif') {
var img = fs.readFileSync('./logo.gif');
res.writeHead(200, {'Content-Type': 'image/gif' });
res.end(img, 'binary');
} else {
res.writeHead(200, {'Content-Type': 'text/plain' });
res.end('Hello World \n');
}
}).listen(8080, '127.0.0.1');res.end(img);はである必要がありますres.end(img, 'binary');。よくできました！
エクスプレスフレームワークを使用する必要があります。
npm install expressその後
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);そして、URL localhost：8080 / images / logo.gifが機能するはずです。
手遅れですが、誰かを助けます、私は使っnode version v7.9.0ていますexpress version 4.15.0
ディレクトリ構造が次のようなものである場合：
your-project
uploads
package.json
server.jsserver.jsコード：
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/uploads'));// you can access image
//using this url: http://localhost:7000/abc.jpg
//make sure `abc.jpg` is present in `uploads` dir.
//Or you can change the directory for hiding real directory name:
`app.use('/images', express.static(__dirname+'/uploads/'));// you can access image using this url: http://localhost:7000/images/abc.jpg
app.listen(7000);リクエストに応じたバニラノードのバージョン：
var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');
http.createServer(function(req, res) {
// parse url
var request = url.parse(req.url, true);
var action = request.pathname;
// disallow non get requests
if (req.method !== 'GET') {
res.writeHead(405, {'Content-Type': 'text/plain' });
res.end('405 Method Not Allowed');
return;
}
// routes
if (action === '/') {
res.writeHead(200, {'Content-Type': 'text/plain' });
res.end('Hello World \n');
return;
}
// static (note not safe, use a module for anything serious)
var filePath = path.join(__dirname, action).split('%20').join(' ');
fs.exists(filePath, function (exists) {
if (!exists) {
// 404 missing files
res.writeHead(404, {'Content-Type': 'text/plain' });
res.end('404 Not Found');
return;
}
// set the content type
var ext = path.extname(action);
var contentType = 'text/plain';
if (ext === '.gif') {
contentType = 'image/gif'
}
res.writeHead(200, {'Content-Type': contentType });
// stream the file
fs.createReadStream(filePath, 'utf-8').pipe(res);
});
}).listen(8080, '127.0.0.1');fs.exists（競合状態）を確認したくない場合は、配管時にエラーをキャッチする方がよいでしょう。
var http = require('http');
var fs = require('fs');
http.createServer(function(req, res) {
res.writeHead(200,{'content-type':'image/jpg'});
fs.createReadStream('./image/demo.jpg').pipe(res);
}).listen(3000);
console.log('server running at 3000');RESTify for RESTサービスを使用するのが好きです。私の場合、画像を提供するRESTサービスを作成していて、画像ソースが404/403を返した場合、別の画像を返したかったのです。ここに私がここにいくつかのものを組み合わせて思いついたものがあります：
function processRequest(req, res, next, url) {
var httpOptions = {
hostname: host,
path: url,
port: port,
method: 'GET'
};
var reqGet = http.request(httpOptions, function (response) {
var statusCode = response.statusCode;
// Many images come back as 404/403 so check explicitly
if (statusCode === 404 || statusCode === 403) {
// Send default image if error
var file = 'img/user.png';
fs.stat(file, function (err, stat) {
var img = fs.readFileSync(file);
res.contentType = 'image/png';
res.contentLength = stat.size;
res.end(img, 'binary');
});
} else {
var idx = 0;
var len = parseInt(response.header("Content-Length"));
var body = new Buffer(len);
response.setEncoding('binary');
response.on('data', function (chunk) {
body.write(chunk, idx, "binary");
idx += chunk.length;
});
response.on('end', function () {
res.contentType = 'image/jpg';
res.send(body);
});
}
});
reqGet.on('error', function (e) {
// Send default image if error
var file = 'img/user.png';
fs.stat(file, function (err, stat) {
var img = fs.readFileSync(file);
res.contentType = 'image/png';
res.contentLength = stat.size;
res.end(img, 'binary');
});
});
reqGet.end();
return next();
}上記の回答に加えて、画像を最適化し、レスポンシブな画像を提供することで、Webトラフィックの90％以上が画像であるため、ページの読み込み時間が劇的に向上します。あなたはしたいかもしれませんJS /ノードモジュールを使用して画像のプリプロセスなどimagemin理想的なうなり声やとビルドプロセスの間に、関連するプラグインをがぶ飲み。
画像の最適化とは、理想的な画像タイプを見つけて処理し、最適な圧縮を選択して、画質とファイルサイズのバランスをとることを意味します。
レスポンシブ画像を配信すると、各画像の複数のサイズとフォーマットが自動的に作成さsrcsetれ、htmlで使用することで、単一のブラウザごとに最適な画像セット（つまり、理想的なフォーマットとサイズ、つまり最適なファイルサイズ）を提供できます。
ビルドプロセス中の画像処理の自動化とは、一度組み込んで最適化された画像を表示することで、最小限の時間で済みます。
この方法は私にとってはうまくいきます。動的ではありませんが、要点は次のとおりです。
const fs = require('fs');
const express = require('express');
const app = express();
app.get( '/logo.gif', function( req, res ) {
fs.readFile( 'logo.gif', function( err, data ) {
if ( err ) {
console.log( err );
return;
}
res.write( data );
return res.end();
});
});
app.listen( 80 );//This method involves directly integrating HTML Code in the res.write
//first time posting to stack ...pls be kind
const express = require('express');
const app = express();
const https = require('https');
app.get("/",function(res,res){
res.write("<img src="+image url / src +">");
res.send();
});
app.listen(3000, function(req, res) {
console.log("the server is onnnn");
});