Comment servir une image en utilisant nodejs

Question

J'ai un logo qui réside au public / images / logo.gif. Voici mon code nodejs.

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

Cela fonctionne, mais lorsque je demande localhost: 8080 / logo.gif, il est évident que je ne reçois pas le logo.

Quels changements je dois faire pour servir une image.

Answer 1

Je suis d'accord avec les autres affiches que finalement, vous devez utiliser un framework, tels que Express.. mais d'abord, vous devez également comprendre comment faire quelque chose de fondamental comme ça, sans une bibliothèque, pour vraiment comprendre ce que la bibliothèque résumés loin pour vous.. Les étapes sont

1. Analyser la demande HTTP entrante, pour voir le chemin que l'utilisateur demande
2. Ajouter une voie dans l'instruction conditionnelle pour le serveur pour répondre aux
3. Si l'image est demandée, lire le fichier image à partir du disque.
4. Servir le contenu de l'image-type dans un en-tête
5. Servir de l'image contenu dans le corps

Le code devrait ressembler à quelque chose comme ça (pas testé)

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

Answer 2

Vous devriez utiliser le cadre express .

npm install express

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

puis l'URL localhost: 8080 / images / logo.gif devrait fonctionner

Answer 3

Version du noeud vanille comme demandé:

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

Answer 4

J'aime utiliser Restify pour les services REST. Dans mon cas, j'avais créé un service REST pour servir des images, puis si une source d'image renvoyait 404/403, je voulais renvoyer une image alternative. Voici ce que j'ai trouvé en combinant certaines des choses ici:

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

Answer 5

Vous devez utiliser une bibliothèque prenant en compte les URL et les fichiers statiques. Je recommande d'utiliser Express . Il dispose d'installations pour configurer des itinéraires et d'un module de service de fichiers statiques.