Adresinde bulunan bir logom var public/images/logo.gif. İşte nodejs kodum.
http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/plain' });
res.end('Hello World \n');
}).listen(8080, '127.0.0.1');
Çalışıyor ama talep localhost:8080/logo.gifettiğimde açıkçası logoyu alamıyorum.
Bir görüntüyü sunmak için ne tür değişiklikler yapmam gerekiyor?
Yanıtlar:
Bu soru 5 yaşın üzerinde ama her yanıtın bazı sorunları var .
Aşağıdakilerle bir resim sunmak için örnekler için aşağı kaydırın:
express.staticexpressconnecthttpnetTüm örnekler ayrıca GitHub'da: https://github.com/rsp/node-static-http-servers
Test sonuçları Travis'te mevcuttur: https://travis-ci.org/rsp/node-static-http-servers
Bu sorunun sorulmasının üzerinden 5 yıldan fazla bir süre geçtikten sonra generalhenry tarafından yalnızca bir doğru cevap var ama bu cevap kodu ile herhangi bir sorun olsa bile, bazı sorunlar var gibi görünüyor alımı . "İşi yaptırmak için bir başkasına nasıl güvenileceğinden başka pek bir şey açıklamadığı" yorumunda bulunuldu ve kaç kişinin bu yorumu oylamış olması birçok şeyin açıklığa kavuşturulması gerektiğini açıkça gösteriyor.
Her şeyden önce, "Node.js kullanarak görüntüler nasıl sunulur" sorusunun iyi bir yanıtı, statik bir dosya sunucusunu sıfırdan uygulamak ve bunu kötü yapmaktır. İyi bir cevap işi doğru yapan Express gibi bir modül kullanmaktır .
Express kullanmanın "işi yapmak için başka birine nasıl güvenileceğinden başka pek bir şey açıklamadığını" söyleyen yorumları yanıtlarken , httpmodülü kullanmanın işi halletmek için zaten başka birine bağlı . Birisi işi yapmak için kimseye güvenmek istemiyorsa, bunun yerine en azından ham TCP soketleri kullanılmalıdır - bunu aşağıdaki örneklerimden birinde yapıyorum.
Daha ciddi bir sorun, burada httpmodülü kullanan tüm cevapların bozuk olmasıdır . Onlar tanıtmak yarış koşulları , güvensiz yol çözünürlüğünü yol açacaktır yol geçişi açığı , engelleme I / O tamamen edeceğini herhangi eşzamanlı istekleri hizmet için başarısız tüm diğer ince sorunlara - onlar tamamen soru sorar ne örnek olarak kırılır ve yine de httpTCP soketlerini kullanmak yerine modül tarafından sağlanan soyutlamayı zaten kullanıyorlar, böylece iddia ettikleri gibi her şeyi sıfırdan bile yapmıyorlar.
Soru "Statik dosya sunucusunu bir öğrenme alıştırması olarak sıfırdan nasıl uygulanır" ise, o zaman elbette bunun nasıl yapılacağına dair yanıtlar gönderilmelidir - ancak o zaman bile en azından bunların doğru olmasını beklemeliyiz . Ayrıca, bir görüntüyü sunmak isteyen birinin gelecekte daha fazla görüntü sunmak isteyebileceğini varsaymak mantıksız değildir, bu nedenle sabit kodlanmış yolla yalnızca tek bir dosya sunabilen belirli bir özel statik dosya sunucusu yazmanın biraz dar görüşlü. Bir görüntünün nasıl sunulacağına dair bir yanıt arayan birinin, herhangi bir görüntüye hizmet etmek için genel bir çözüm yerine yalnızca tek bir görüntüye hizmet eden bir çözümden memnun olacağını hayal etmek zor görünüyor.
Kısacası, soru bir resim ve bir de bunu uygun bir modül kullanmaktır bir cevap hizmet etmek nasıl güvenli preformant ve güvenilir bir şekilde olduğunu , okunabilir sürdürülebilir ve geleceğe kullanırken en iyi uygulama profesyonel düğüm geliştirme. Ancak, böyle bir yanıta büyük bir katkı, aynı işlevselliği manuel olarak uygulamanın bir yolunu göstereceğini kabul ediyorum, ancak ne yazık ki bunu yapmak için yapılan her girişim başarısız oldu. İşte bu yüzden bazı yeni örnekler yazdım.
Bu kısa girişten sonra, işte 5 farklı soyutlama seviyesinde işi yapan beş örneğim.
Her örnek, publicdizindeki dosyalara hizmet eder ve aşağıdakilerin minimum işlevselliğini destekler:
index.htmlvarsayılan bir dizin indeksi olarak hizmet ederHer sürümü Node 4, 5, 6 ve 7 sürümlerinde test ettim.
express.staticBu sürüm express.static, expressmodülün yerleşik ara yazılımını kullanır .
Bu örnek en fazla işlevselliğe ve en az miktarda koda sahiptir.
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/');
});
expressBu sürüm expressmodülü kullanır ancak express.staticara katman yazılımı yoktur. Statik dosyaların sunulması, akışları kullanan tek bir yol işleyici olarak uygulanır.
Bu örnekte, basit yol geçiş önlemleri vardır ve en yaygın MIME türlerinin sınırlı bir kümesini destekler.
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/');
});
connectBu sürüm, connect.m2'den bir düzey daha düşük olan modülü kullanır express.
Bu örnek, expresssürüme benzer işlevselliğe sahiptir, ancak biraz daha düşük kollu API'ler kullanır.
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/');
});
httpBu sürüm, httpNode'da HTTP için en düşük seviyeli API olan modülü kullanır .
Bu örnek connectsürüme benzer işlevselliğe sahiptir, ancak daha düşük seviyeli API'ler kullanır.
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/');
});
netBu sürüm, netNode'daki TCP soketleri için en düşük seviyeli API olan modülü kullanır .
Bu örnek, httpsürümün bazı işlevlerine sahiptir, ancak minimal ve eksik HTTP protokolü sıfırdan uygulanmıştır. Parçalı kodlamayı desteklemediğinden, yanıt göndermeden önce boyutu bilmelerine hizmet etmeden önce dosyaları belleğe yükler çünkü dosyaların statü ve ardından yükleme bir yarış koşulu ortaya çıkarır.
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/');
});
Daha fazla açıklama ile tüm örnekleri GitHub'da yayınladım.
Örnekler ile express.static, express, connect, httpve net:
Yalnızca kullanan diğer proje express.static:
Test sonuçları Travis'te mevcuttur:
Her şey 4, 5, 6 ve 7 numaralı Düğüm sürümlerinde test edilir.
Diğer ilgili cevaplar:
express.staticettiğimizde, url'yi çağırarak görüntüyü getirebiliriz, görüntüyü http://ip:port/path_after_the_static_foldersunmak için statik klasörün kendisinden bahsetmemize gerek yoktur. Bununla birlikte app.use('/static', express.static(imagePath)), kolaylık sağlamak için aşağıdaki adrese
Sonunda Express gibi bir çerçeve kullanmanız gerektiğini belirten diğer posterlere katılıyorum .. ama önce kütüphanenin sizin için neyi özetlediğini gerçekten anlamak için kütüphane olmadan bunun gibi temel bir şeyi nasıl yapacağınızı anlamalısınız .. adımlar
Kod şuna benzer (test edilmemiştir)
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);olmalıdır res.end(img, 'binary');. İyi iş!
Ekspres çerçeveyi kullanmalısınız .
npm install express
ve sonra
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);
ve sonra localhost: 8080 / images / logo.gif URL'si çalışmalıdır.
Çok geç ama birine yardım ediyorum, kullanıyorum node version v7.9.0veexpress version 4.15.0
dizin yapınız böyle bir şeyse:
your-project
uploads
package.json
server.js
server.js kodu:
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 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');
Vanilya düğümü sürümü istendiği gibi:
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(Yarış durumunu) kontrol etmek istemezseniz , borulama sırasında bir hata yakalamak daha iyi bir alışkanlık olacaktır.
Restify for REST servisleri kullanmayı seviyorum . Benim durumumda, görüntüleri sunmak için bir REST hizmeti oluşturmuştum ve sonra bir görüntü kaynağı 404/403 döndürürse, alternatif bir görüntü döndürmek istedim. İşte bazı şeyleri burada birleştirerek ortaya çıkardığım şey:
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();
}
Bu biraz konu dışı olabilir, çünkü özellikle Node.js aracılığıyla statik dosya sunma hakkında soru soruyorsunuz ( fs.createReadStream('./image/demo.jpg').pipe(res)bu aslında iyi bir fikirdir), ancak üretimde Node uygulamanızın başka türlü üstesinden gelinemeyen görevleri işlemesini isteyebilirsiniz. ve örneğin Nginx'e yüksüz statik sunum.
Bu, uygulamanızın içinde daha az kodlama ve daha iyi verimlilik anlamına gelir, çünkü ters proxy'ler tasarım gereği bunun için idealdir.
Bu yöntem benim için işe yarıyor, dinamik değil ama doğrudan konuya:
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 );
Yukarıdaki yanıtlara, resimleri optimize etmenin ve duyarlı resimler sunmanın, web trafiğinin% 90'ından fazlasının resim olması nedeniyle sayfa yükleme sürelerine önemli ölçüde yardımcı olduğunu eklememe izin verin. İmgelem ve ilgili eklentiler gibi JS / Node modüllerini kullanarak görüntüleri önceden işlemek isteyebilirsiniz , ideal olarak Grunt veya Gulp ile derleme işlemi sırasında .
Görüntüleri optimize etme , işlemek için ideal bir görüntü türü bulmak ve görüntü kalitesi ile dosya boyutu arasında bir denge sağlamak için en iyi sıkıştırmayı seçmek anlamına gelir.
Duyarlı görüntüler sunmak , her görüntünün çeşitli boyutlarını ve biçimlerini otomatik olarak oluşturmaya dönüşür ve srcsetHTML'nizde kullanmak , her bir tarayıcı için en uygun görüntü kümesini (yani ideal biçim ve boyutlar, dolayısıyla en uygun dosya boyutu) sunmanıza olanak tanır.
Görüntü işleme otomasyonuDerleme işlemi sırasında , onu bir kez birleştirmek ve minimum ekstra zaman gerektiren optimize edilmiş görüntüleri daha sonra sunmak anlamına gelir.
Bazı büyük okumaya duyarlı görüntüleri , küçültme genel, içinde imagemin düğüm modülü ve srcset kullanarak .
//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");
});