147

আমার কাছে একটি লোগো রয়েছে যা সর্বজনীন / চিত্র / লোগো.gif এ বাস করে। এখানে আমার নোডেজ কোড।

http.createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/plain' });
  res.end('Hello World \n');
}).listen(8080, '127.0.0.1');

এটি কার্যকর হয় তবে যখন আমি লোকালহোস্টের জন্য অনুরোধ করি: 8080 / logo.gif তবে আমি অবশ্যই লোগোটি পাই না।

একটি চিত্র পরিবেশন করতে আমার কী পরিবর্তন করতে হবে।

node.js

— নিক ভ্যান্ডারবিল্ট
সূত্র

224

2016 আপডেট

এক্সপ্রেসের সাথে এবং এক্সপ্রেস ছাড়াই যেগুলি বাস্তবে কাজ করে Ex

এই প্রশ্নটি 5 বছরেরও বেশি পুরানো তবে প্রতিটি উত্তরের কিছু সমস্যা রয়েছে ।

টি এল; ডিআর

এর সাথে একটি চিত্র পরিবেশন করতে উদাহরণগুলির জন্য নীচে স্ক্রোল করুন:

express.static
express
connect
http
net

সমস্ত উদাহরণ গীতহাব এও রয়েছে: https://github.com/rsp/node-static-http-servers

পরীক্ষার ফলাফল ট্র্যাভিসে পাওয়া যায়: https://travis-ci.org/rsp/node-static-http-servers

ভূমিকা

এই প্রশ্নটি 5 বছরেরও বেশি পরে যেহেতু জেনারেনেরির দ্বারা কেবল একটি সঠিক উত্তর রয়েছে তবে যদিও উত্তরটির কোডটির সাথে কোনও সমস্যা নেই, তবে মনে হচ্ছে অভ্যর্থনা নিয়ে কিছু সমস্যা আছে । এটি মন্তব্য করা হয়েছিল যে এটি "কীভাবে অন্য কারও উপর নির্ভর করে কাজটি করা যায় তার চেয়ে অনেক বেশি ব্যাখ্যা করে না" এবং কতজন লোক এই মন্তব্যটিতে ভোট দিয়েছে তা স্পষ্টভাবে দেখায় যে অনেক কিছুর স্পষ্টতা প্রয়োজন।

প্রথমত, "নোড.জেএস ব্যবহার করে কীভাবে চিত্রগুলি পরিবেশন করা যায়" এর একটি ভাল উত্তর স্ক্র্যাচ থেকে কোনও স্ট্যাটিক ফাইল সার্ভার প্রয়োগ করছে না এবং এটি খারাপভাবে করছে। একটি ভাল উত্তর এক্সপ্রেসের মতো একটি মডিউল ব্যবহার করছে যা কাজটি সঠিকভাবে করে ।

এক্সপ্রেস ব্যবহার করা "কাজটি করার জন্য কীভাবে অন্যের উপর নির্ভর করতে হবে তার চেয়ে অনেক বেশি ব্যাখ্যা করে না" এমন মন্তব্যের জবাব দেওয়া উচিত, এটি উল্লেখ করা উচিত যে httpমডিউলটি ইতিমধ্যে অন্য কারও উপর নির্ভর করে কাজটি সম্পন্ন করার জন্য। যদি কেউ কাজটি পেতে কারও উপর নির্ভর করতে না চান তবে তার পরিবর্তে কমপক্ষে কাঁচা টিসিপি সকেট ব্যবহার করা উচিত - যা আমি নীচের আমার একটি উদাহরণে করি।

আরও গুরুতর সমস্যা হ'ল এখানে যে উত্তরগুলি httpমডিউলটি ব্যবহার করে তার সবগুলিই নষ্ট হয়ে যায় । তারা বর্ণের পরিস্থিতি , অনিরাপদ পথের সমাধানের প্রবর্তন করে যা পথ ট্র্যাভারসাল দুর্বলতার দিকে নিয়ে যায় , I / O কে অবরুদ্ধ করে যা কোনও সময়ে এবং অন্যান্য সূক্ষ্ম সমস্যাগুলিতে কোনও একযোগের অনুরোধগুলি পরিপূর্ণ করতে ব্যর্থ হবে - প্রশ্নটি যা জিজ্ঞাসা করে তার উদাহরণ হিসাবে তারা সম্পূর্ণরূপে ভেঙে যায়, এবং তবুও তারা ইতিমধ্যে httpটিসিপি সকেট ব্যবহার না করে মডিউল দ্বারা সরবরাহিত বিমূর্ততাটি ব্যবহার করে যাতে তারা দাবি হিসাবে স্ক্র্যাচ থেকে সবকিছু না করে।

যদি প্রশ্নটি ছিল "স্ক্র্যাচ থেকে স্থিতিশীল ফাইল সার্ভারটি কীভাবে প্রয়োগ করা যায়, একটি শেখার অনুশীলন হিসাবে" তবে সমস্ত উপায়ে উত্তর কীভাবে তা পোস্ট করা উচিত - তবে তারপরেও আমাদের কমপক্ষে সঠিক হওয়া আশা করা উচিত । এছাড়াও, এটি ধরে নেওয়া অযৌক্তিক নয় যে যে কেউ চিত্র পরিবেশন করতে চায় সে ভবিষ্যতে আরও চিত্র সরবরাহ করতে চায় যাতে কেউ যুক্তি দিতে পারে যে একটি নির্দিষ্ট কাস্টম স্ট্যাটিক ফাইল সার্ভার লিখতে পারে যা হার্ড-কোডিং পথের সাথে কেবল একটি একক ফাইল পরিবেশন করতে পারে কিছুটা সংক্ষিপ্ত এটি ধারণা করা শক্ত বলে মনে হয় যে যে কেউ কীভাবে কোনও চিত্র পরিবেশন করতে পারে সে সম্পর্কে একটি উত্তর অনুসন্ধান করে এমন কোনও সমাধানে সন্তুষ্ট হবে যা কোনও চিত্রের পরিবেশনার জন্য সাধারণ সমাধানের পরিবর্তে কেবল একটি একক চিত্র পরিবেশন করে।

সংক্ষেপে, প্রশ্ন হল পেশাদার নোডের সর্বোত্তম অনুশীলনটি ব্যবহার করার সময় পাঠযোগ্য, রক্ষণাবেক্ষণযোগ্য এবং ভবিষ্যত- প্রমাণযোগ্য সুরক্ষিত, পূর্বনির্ধারিত এবং নির্ভরযোগ্য উপায়ে এটি করার জন্য একটি উপযুক্ত মডিউলটি কীভাবে ব্যবহার করতে হয় এবং তার উত্তর কীভাবে দেওয়া হয়? উন্নয়ন। তবে আমি সম্মত হই যে এই জাতীয় উত্তরের একটি দুর্দান্ত সংযোজন হ'ল ম্যানুয়ালি একই কার্যকারিতা বাস্তবায়নের জন্য একটি উপায় দেখানো হবে তবে দুঃখের বিষয় যে এটি করার প্রতিটি প্রচেষ্টা এখনও ব্যর্থ হয়েছে। এবং সে কারণেই আমি কয়েকটি নতুন উদাহরণ লিখেছি।

এই সংক্ষিপ্ত পরিচিতির পরে, বিমূর্তনের 5 টি বিভিন্ন স্তরে আমার কাজ করা 5 টি উদাহরণ এখানে রয়েছে।

সর্বনিম্ন কার্যকারিতা

প্রতিটি উদাহরণ publicডিরেক্টরি থেকে ফাইলগুলি সরবরাহ করে এবং এর সর্বনিম্ন কার্যকারিতা সমর্থন করে:

সর্বাধিক সাধারণ ফাইলগুলির জন্য মাইমে টাইপ types
এইচটিএমএল, জেএস, সিএসএস, সরল পাঠ্য এবং চিত্র পরিবেশন করে
index.htmlএকটি ডিফল্ট ডিরেক্টরি সূচক হিসাবে কাজ করে
অনুপস্থিত ফাইলগুলির জন্য ত্রুটি কোডগুলির সাথে প্রতিক্রিয়া জানায়
কোনও পথ ট্র্যাভারসাল দুর্বলতা নেই
ফাইল পড়ার সময় কোনও রেসের শর্ত নেই

আমি নোড সংস্করণ 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মিডওয়্যারটি ছাড়াই । স্ট্যাটিক ফাইলগুলি পরিবেশন করা স্ট্রিম ব্যবহার করে একক রুট হ্যান্ডলার হিসাবে প্রয়োগ করা হয়।

এই উদাহরণে সরল পথ ট্র্যাভারসাল কাউন্টারমেজার রয়েছে এবং বেশিরভাগ সাধারণ এমআইএমআই টাইপের একটি সীমিত সেট সমর্থন করে।

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মডিউলটি ব্যবহার করে যা বিমূর্ততার চেয়ে এক স্তর কম 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`

এই সংস্করণটি httpমডিউলটি ব্যবহার করে যা নোডের HTTP- র জন্য সর্বনিম্ন-স্তরের API।

এই উদাহরণটির connectসংস্করণে অনুরূপ কার্যকারিতা রয়েছে তবে আরও নিম্ন-স্তরের এপিআই ব্যবহার করে।

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`

এই সংস্করণটি netমডিউলটি ব্যবহার করে যা নোডের টিসিপি সকেটের জন্য সর্বনিম্ন-স্তরের API।

এই উদাহরণে 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/');
});

উদাহরণ ডাউনলোড করুন

আমি আরও ব্যাখ্যা সহ গিটহাবের সমস্ত উদাহরণ পোস্ট করেছি।

উদাহরণ express.static, express, connect, httpএবং net:

https://github.com/rsp/node-static-http-servers

অন্যান্য প্রকল্প কেবল ব্যবহার করে express.static:

https://github.com/rsp/node-express-static-example

টেস্ট

ট্র্যাভিসে পরীক্ষার ফলাফল পাওয়া যায়:

https://travis-ci.org/rsp/node-static-http-servers

নোড সংস্করণ 4, 5, 6 এবং 7-তে সমস্ত কিছু পরীক্ষা করা হয়।

আরো দেখুন

অন্যান্য সম্পর্কিত উত্তর:

— আরএসপি
সূত্র

8

প্রশ্নের সেরা এবং সম্পূর্ণ উত্তর। খুব খারাপ, আমি আপনাকে একবারে উপড়ে ফেলতে পারি।

— কুলভর

3

এই জাতীয় মদ প্রশ্নগুলি পুনঃনির্মাণ করার উপায় থাকতে হবে! আমি মাত্র এক ঘন্টা বা তার চেয়ে বেশি সময় নষ্ট করেছি যাতে কাজের জন্য ১১০ টি ভোটের প্রতিক্রিয়া পাওয়া যায়। অবশেষে আমি শুধু চেক করতে নিচে স্ক্রোল। আপনার উত্তরটি (হওয়া উচিত) বিষয়ের পাঠ্যপুস্তক হতে পারে।

— থাইল্যান্ডের

2

সেরা উত্তর এবং সম্পূর্ণ বিশদ। স্বীকৃত উত্তর হিসাবে চিহ্নিত হওয়া উচিত। ধন্যবাদ বন্ধু !!!

— প্রবোধ এম

কেন কেউ এক্সপ্রেস ব্যবহার করবে তা আমি জানি না। আমি শুরুতে খুব সম্ভবত বোধহয় করেছি কারণ অন্যরা সবাই করেছে। তখন আমি বুঝতে পেরেছি যে নোডের এইচটিপি মডিউল ব্যবহার করা সঠিক পন্থা। এটি এর জন্য সরবরাহ করা হয়। আপনি অনেক নমনীয়তা পান। আপনি HTTP প্রোটোকল বুঝতে পারেন এবং আপনি সহজেই ডিবাগ করতে পারেন। এক্সপ্রেস http মডিউলের উপরে প্রচুর পরিমাণে জার্গন এবং একটি পাতলা স্তর সরবরাহ করে যা HTTP মডিউলটির সাথে কাঁচা কোডিংয়ের মাধ্যমে কার্যকর করা সহজ। আমি এক্সপ্রেসের যে কোনও ব্যবহারকারীর বা অন্য যে কোনও মডিউলটি তাদের থেকে দূরে সরে যেতে এবং সরাসরি http মডিউলটি ব্যবহার করার জন্য দৃ strongly়ভাবে পরামর্শ দিচ্ছি।

— সানি

1

আমার মতো নবাবিদের জন্য আমি একটি নোট উল্লেখ করতে চাই: যখন আমরা কোনও ফোল্ডারটিকে স্ট্যাটিক হিসাবে ব্যবহার express.staticকরে ইউআরএল কল করে চিত্রটি আনতে http://ip:port/path_after_the_static_folderপারি, তখন আমাদের ইমেজটি পরিবেশন করতে স্ট্যাটিক ফোল্ডারটি উল্লেখ করার দরকার নেই। যদিও আমরা app.use('/static', express.static(imagePath))সুবিধার্থে পার্ট

— রকিবুল হক

160

আমি অন্যান্য পোস্টারের সাথে একমত যে অবশেষে, আপনার যেমন একটি কাঠামো যেমন এক্সপ্রেস ব্যবহার করা উচিত .. তবে প্রথমে আপনার এটিও বুঝতে হবে যে লাইব্রেরিটি ছাড়া আপনার মতো কী কী মৌলিক কিছু করা যায়, লাইব্রেরিটি আপনাকে কীভাবে বিমূর্ত করে দেয় তা বুঝতে ... পদক্ষেপ হয়

ব্যবহারকারী কোন পথে জিজ্ঞাসা করছে তা দেখার জন্য আগত এইচটিটিপি অনুরোধটি পার্স করুন
সার্ভারের প্রতিক্রিয়া জানাতে শর্তাধীন বিবৃতিতে একটি পথ যুক্ত করুন
যদি ছবিটির অনুরোধ করা হয়, তবে ডিস্ক থেকে চিত্র ফাইলটি পড়ুন।
একটি শিরোনামে চিত্রের সামগ্রী বিষয়বস্তু পরিবেশন করুন
শরীরে চিত্রের বিষয়বস্তু পরিবেশন করুন

কোডটি এরকম কিছু দেখাচ্ছে (পরীক্ষিত নয়)

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');

— Noli
সূত্র

27

কোনও প্রতিক্রিয়ার মাঝামাঝি সময়ে আপনি রিডফাইলসিঙ্ক ব্যবহার করবেন না। হয় প্রথম টিকিটে একটি সিঙ্ক লোড ব্যবহার করা উচিত বা অ্যাসিঙ্ক পদ্ধতিটি ব্যবহার করা উচিত। codr.cc/s/5d0b73d6/js

— generalhenry

1

সিঙ্ক সংস্করণে আমি আপনার সাথে বোর্ডে রয়েছি, যদিও অ্যাসিঙ্ক সংস্করণটির জন্য, আমি ভেবেছিলাম যে ফাইলগুলির জন্য অ-ব্লকিং অপারেশন ব্যবহারের বিপদটি ছিল, এটি পুরো ফাইলটি পড়ার আগেই প্রতিক্রিয়াটি প্রেরণ করতে পারে এবং আপনাকে ছেড়ে চলে যেতে পারে একটি আংশিক ফাইল ব্যবহারকারীর কাছে পরিবেশন করা হচ্ছে? আপনি যদি একটি অ্যাসিঙ্ক ফাইল রিড ব্যবহার করেন তবে আপনার কি চিংকড এনকোডিং ব্যবহার করার দরকার আছে?

— noli

1

পুরো ফাইলটি লোড না হওয়া অবধি fs.readFileSync কলব্যাক দেয় না যাতে খণ্ড হ্যান্ডলিংয়ের দরকার নেই। খণ্ড হ্যান্ডলিং বেশিরভাগ নেটওয়ার্ক ফাইল স্থানান্তরের জন্য (যেহেতু বিষয়গুলি প্রত্যাশার চেয়ে বেশি সময় নিতে পারে)।

— জেনারেলেনি

9

লাইন res.end(img);হওয়া উচিত res.end(img, 'binary');। ভাল কাজ!

— হনজা পোকার্নি

3

"1 এর জন্য" তবে প্রথমে আপনার এটিও বুঝতে হবে যে লাইব্রেরিটি ছাড়া কীভাবে মৌলিক কিছু করা যায়, লাইব্রেরি আপনাকে কীভাবে বিমোহিত করে তা সত্যিই বুঝতে .. "

— সানি

67

আপনার এক্সপ্রেস ফ্রেমওয়ার্কটি ব্যবহার করা উচিত ।

npm install express

এবং তারপর

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);

এবং তারপরে ইউআরএল লোকালহোস্ট: 8080 / চিত্র / লোগো . gif কাজ করা উচিত।

— generalhenry
সূত্র

18

নিরাপদ, তবে কীভাবে কাজটি চালানোর জন্য অন্য কারও উপর নির্ভর করা যায় তার চেয়ে অনেক বেশি ব্যাখ্যা করে না।

— লিগি

আমি একটি ভ্যানিলা নোড (কেবলমাত্র মডিউলগুলি) সংস্করণ যুক্ত করেছি।

— জেনারেলেনারি

+ আমি এখন পর্যন্ত পোস্ট করা এটিই সঠিক উত্তর is আমি আরও উত্তরে আমার উত্তরে এটি ব্যাখ্যা করি ।

— আরএসপি

15

এটি অনেক দেরি হয়ে গেছে তবে কাউকে সহায়তা করে, আমি ব্যবহার করছি node version v7.9.0এবংexpress version 4.15.0

আপনার ডিরেক্টরি কাঠামো যদি এরকম কিছু হয়:

your-project
   uploads
   package.json
   server.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);

— মুহাম্মদ শাহজাদ
সূত্র

14

অনুরোধ অনুসারে ভ্যানিলা নোড সংস্করণ:

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');

— generalhenry
সূত্র

2

আপনি fs.exists(রেসের শর্ত) পরীক্ষা করতে চান না , পাইপিংয়ের সময় ত্রুটি ধরা ভাল a

— ব্রেন্ডন

যদিও এই ক্ষেত্রে চেক করা বিদ্যমান নোড উপায় নয়, এই উত্তরটি সম্পর্কে সমস্ত কিছু গৃহীত উত্তরের চেয়ে 1 মিলিয়ন গুণ ভাল।

— নিনজাক্সর

1

আমি @ ব্রেন্ডনআশওয়ার্থ এর সাথে একমত জাতি শর্তাবলী এখানে প্রায় সব উত্তর উপস্থিত। আমি আমার উত্তরে এটি সম্পর্কে আরও লিখেছি । স্রোতের সাথে এটি লেখার জন্য কুডোস। প্রায় সমস্ত অন্যান্য উত্তরগুলি রিডফিলসাইক ব্যবহার করে যা অবরুদ্ধ করছে এবং কোনও ইভেন্ট হ্যান্ডলারে ব্যবহার করা উচিত নয়।

— আরএসপি

1

var filePath = path.resolve ('সর্বজনীন', '।' + অংশ.পথনাম); প্রতিক্রিয়া.ওরাইটহিড (200, Content 'বিষয়বস্তুর ধরণ': মাইম.লুকআপ (পার্টস.প্যাথনাম)}); মাইম - এনপিএম থেকে প্যাকেজ মাইম টাইপ

— রিজেন

14

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');

— মহাদেব মীরাসদার
সূত্র

সহজ এবং বিন্দুতে, এক্সপ্রেস উত্তরের চেয়ে উপায় ভাল .. এটি 1000 টি আপোসটির দাবিদার। কেবলমাত্র একটি টিপ: সম্ভবত কোড স্নিপেটটি সরিয়ে কেবল জাভাস্ক্রিপ্ট পাঠ্য সহ এটিকে প্রতিস্থাপন করুন

— নীলজাইকে

একটি পরামিতি পাস করা সম্ভব হবে যাতে './image/:jpg কোনও ছবি পরিবেশন করতে পারে?

— প্রভা

13

আমি আরএসটি পরিষেবার জন্য রেজাইফাই ব্যবহার করতে চাই । আমার ক্ষেত্রে, আমি ইমেজগুলি পরিবেশন করার জন্য একটি রেস্ট সার্ভিস তৈরি করেছি এবং তারপরে যদি কোনও চিত্র উত্স 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();
}

— occasl
সূত্র

ইভেন্ট হ্যান্ডলারের অভ্যন্তরে আপনার আর কখনও রিডফাইলসাইক ব্যবহার করা উচিত নয় । এটি একটি সিঙ্ক্রোনাস অপারেশন যা ফাইলটি পড়ার সময় আপনার পুরো প্রক্রিয়াটিকে অবরুদ্ধ করে। আমি আমার উত্তরে এটি আরও বিস্তারিতভাবে ব্যাখ্যা করেছি ।

— আরএসপি

5

এটি কিছুটা অফ-টপিক হতে পারে, যেহেতু আপনি নির্দিষ্টভাবে নোড.জেএসের মাধ্যমে স্থির ফাইলের বিষয়ে জিজ্ঞাসা করছেন (যেখানে fs.createReadStream('./image/demo.jpg').pipe(res)আসলে একটি ভাল ধারণা রয়েছে), তবে উত্পাদনে আপনি আপনার নোড অ্যাপ্লিকেশন পরিচালনা করতে চান, অন্যথায় এটি মোকাবেলা করা যাবে না that , এবং অফ-লোড স্ট্যাটিক পরিবেশন করা যেমন এনগিনেক্স।

এর অর্থ আপনার অ্যাপের অভ্যন্তরে কম কোডিং, এবং বিপরীত প্রক্সিগুলির জন্য আরও ভাল দক্ষতা এটির জন্য নকশা আদর্শ।

— Marko-36
সূত্র

3

আমাকে উপরের উত্তরগুলিতে কেবল যুক্ত করতে দাও, যে চিত্রগুলি অনুকূল করে তোলা এবং প্রতিক্রিয়াশীল চিত্র সরবরাহ করা পৃষ্ঠা লোডিংয়ের সময়কে নাটকীয়ভাবে সহায়তা করে, যেহেতু> 90% ওয়েব ট্র্যাফিক চিত্র images আপনি তা করতে চাইবেন প্রাক প্রক্রিয়া জাতীয় / নোড মডিউল ব্যবহার করে ছবি যেমন imagemin , এবং সংশ্লিষ্ট প্ল্যাগ-ইনগুলি আদর্শভাবে ঘোঁৎ ঘোঁৎ বা বিল্ড প্রক্রিয়ার সময় Gulp ।

চিত্রগুলির অনুকূলকরণের অর্থ একটি আদর্শ চিত্রের ধরণটি অনুসন্ধান করা প্রক্রিয়াজাতকরণ এবং চিত্রের গুণমান এবং ফাইলের আকারের মধ্যে ভারসাম্য অর্জনের জন্য অনুকূল সংক্ষেপণ নির্বাচন করা।

প্রতিক্রিয়াশীল চিত্রগুলি পরিবেশন করা প্রতিটি চিত্রের স্বয়ংক্রিয়ভাবে বিভিন্ন আকার এবং ফর্ম্যাট তৈরিতে srcsetএবং আপনার এইচটিএমএল ব্যবহার করে আপনাকে প্রতিটি একক ব্রাউজারের জন্য অনুকূল চিত্র সেট (এটি আদর্শ ফর্ম্যাট এবং মাত্রা, সুতরাং সর্বোত্তম ফাইলের আকার) সরবরাহ করতে দেয়)।

বিল্ড প্রক্রিয়া চলাকালীন ইমেজ প্রসেসিং অটোমেশনের অর্থ এটি একবারে অন্তর্ভুক্ত করা এবং অপ্টিমাইজড চিত্রগুলি আরও উপস্থাপনের জন্য ন্যূনতম অতিরিক্ত সময় প্রয়োজন।

কিছু মহান পড়তে প্রতিক্রিয়াশীল চিত্র , minification জেনারেল মধ্যে imagemin নোড মডিউল এবং srcset ব্যবহার ।

— Nik.H
সূত্র

1

এই পদ্ধতিটি আমার পক্ষে কাজ করে, এটি গতিশীল নয়, তবে সরাসরি:

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 );

— কুলাঙ্গার
সূত্র

0

//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");
});

স্নিপেট প্রসারিত করুন

— কৈয়াল্যা হারকরে
সূত্র

নোডেজ ব্যবহার করে কোনও চিত্র কীভাবে পরিবেশন করা যায়

2016 আপডেট

এক্সপ্রেসের সাথে এবং এক্সপ্রেস ছাড়াই যেগুলি বাস্তবে কাজ করে Ex

টি এল; ডিআর

ভূমিকা

সর্বনিম্ন কার্যকারিতা

express.static

express

connect

http

net

উদাহরণ ডাউনলোড করুন

টেস্ট

আরো দেখুন

`express.static`

`express`

`connect`

`http`

`net`