web-dev-qa-db-fra.com

Comment servir une image en utilisant nodejs

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 quand je demande localhost: 8080/logo.gif, alors évidemment je n’ai pas le logo. 

Quels changements je dois faire pour servir une image.

node.js
113
Nick Vanderbilt

Je suis d’accord avec les autres affiches qui, à terme, devraient utiliser un cadre tel que Express. les étapes sont 

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

Le code ressemblerait à quelque chose comme ça (non 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');
142
noli

Vous devriez utiliser le express framework.

npm install express

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

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

61
generalhenry

J'aime utiliser les services Restify for REST. Dans mon cas, j’avais créé un service REST pour servir des images, puis si une source d’images renvoyait 404/403, je voulais renvoyer une autre image. 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();
}
13
occasl

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).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');
11
generalhenry

Il est trop tard mais aide quelqu'un, j'utilise node version v7.9.0 et express version 4.15.0 

si votre structure de répertoire ressemble à ceci:

your-project
   uploads
   package.json
   server.js

code 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);
11
Muhammad Shahzad

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 fichier statique.

3
kcbanner

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

1
Mahadev Mirasdar

Cela peut paraître un peu hors sujet, puisque vous vous interrogez sur le service de fichiers statiques via Node.js spécifiquement (où fs.createReadStream('./image/demo.jpg').pipe(res) est en fait une bonne idée), mais en production, vous souhaiterez peut-être que votre application Node gère des tâches qui ne peuvent pas être traitées sinon, décharger statique servant par exemple à Nginx. Cela signifie moins de codage dans votre application et une meilleure efficacité, car les proxys inverses sont, par nature, idéaux pour cela.

0
Marko36

Cette méthode fonctionne pour moi, elle n'est pas dynamique mais va droit au but:

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
user11894979