How to serve an image using nodejs

Question

I have a logo that is residing at the public images logo gif  Here is my nodejs code  http createServer function req  res     res writeHead 200    Content-Type    text plain        res end  Hello World  n       listen 8080   127 0 0 1     It works but when I request for localhost 8080 logo gif then I obviously don t get the logo  What changes I need to do to serve an image

User · Answer

Vanilla node version as requested    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

User · Answer

This method works for me  it s not dynamic but straight to the point   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

User · Answer

x000D   x000D    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   lt img src   image url   src    gt         res send         app listen 3000  function req  res      console log  the server is onnnn        x000D   x000D   x000D

User · Answer

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

User · Answer

Let me just add to the answers above  that optimizing images  and serving responsive images helps page loading times dramatically since  gt 90  of web traffic are images  You might want to pre-process images using JS   Node modules such as imagemin and related plug-ins  ideally during the build process with Grunt or Gulp  Optimizing images means processing finding an ideal image type  and selecting optimal compression to achieve a balance between image quality and file size  Serving responsive images translates into creating several sizes and formats of each image automatically and using srcset in your HTML allows you to serve optimal image set  that is  the ideal format and dimensions  thus optimal file size  for every single browser   Image processing automation during the build process means incorporating it up once  and presenting optimized images further on  requiring minimum extra time  Some great read on responsive images  minification in general  imagemin node module and  using srcset

User · Answer

I like using Restify for REST services  In my case  I had created a REST service to serve up images and then if an image source returned 404 403  I wanted to return an alternative image   Here s what I came up with combining some of the stuff here   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

User · Answer

You should use the express framework   npm install express   and then  var express   require  express    var app   express    app use express static   dirname     public     app listen 8080     and then the URL localhost 8080 images logo gif should work

User · Answer

It is too late but helps someone  I m using node version v7 9 0 and express version 4 15 0   if your directory structure is something like this   your-project    uploads    package json    server js   server js code   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

User · Answer

2016 Update  Examples with Express and without Express that actually work  This question is over 5 years old but every answer has some problems   TL DR  Scroll down for examples to serve an image with    express static express connect http net   All of the examples are also on GitHub  https   github com rsp node-static-http-servers  Test results are available on Travis  https   travis-ci org rsp node-static-http-servers  Introduction  After over 5 years since this question was asked there is only one correct answer by generalhenry but even though that answer has no problems with the code  it seems to have some problems with reception  It was commented that it  doesn t explain much other than how to rely on someone else to get the job done  and the fact how many people have voted this comment up clearly shows that a lot of things need clarification   First of all  a good answer to  How to serve images using Node js  is not implementing a static file server from scratch and doing it badly  A good answer is using a module like Express that does the job correctly   Answering comments that say that using Express  doesn t explain much other than how to rely on someone else to get the job done  it should be noted  that using the http module already relies on someone else to get the job done  If someone doesn t want to rely on anyone to get the job done then at least raw TCP sockets should be used instead - which I do in one of my examples below   A more serious problem is that all of the answers here that use the http module are broken  They introduce race conditions  insecure path resolution that will lead to path traversal vulnerability  blocking I O that will completely fail to serve any concurrent requests at all and other subtle problems - they are completely broken as examples of what the question asks about  and yet they already use the abstraction that is provided by the http module instead of using TCP sockets so they don t even do everything from scratch as they claim   If the question was  How to implement static file server from scratch  as a learning exercise  then by all means answers how to do that should be posted - but even then we should expect them to at least be correct  Also  it is not unreasonable to assume that someone who wants to serve an image might want to serve more images in the future so one could argue that writing a specific custom static file server that can serve only one single file with hard-coded path is somewhat shortsighted  It seems hard to imagine that anyone who searches for an answer on how to serve an image would be content with a solution that serves just a single image instead of a general solution to serve any image   In short  the question is how to serve an image and an answer to that is to use an appropriate module to do that in a secure  preformant and reliable way that is readable  maintainable and future-proof while using the best practice of professional Node development  But I agree that a great addition to such an answer would be showing a way to implement the same functionality manually but sadly every attempt to do that has failed so far  And that is why I wrote some new examples   After this short introduction  here are my five examples doing the job on 5 different levels of abstraction   Minimum functionality  Every example serves files from the public directory and supports the minumum functionality of    MIME types for most common files serves HTML  JS  CSS  plain text and images serves index html as a default directory index responds with error codes for missing files no path traversal vulnerabilities no race conditions while reading files   I tested every version on Node versions 4  5  6 and 7   express static  This version uses the express static built-in middleware of the express module   This example has the most functionality and the least amount of code   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  This version uses the express module but without the express static middleware  Serving static files is implemented as a single route handler using streams   This example has simple path traversal countermeasures and supports a limited set of most common MIME types   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  This version uses the connect module which is a one level of abstraction lower than express   This example has similar functionality to the express version but using slightly lower-lever APIs   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  This version uses the http module which is the lowest-level API for HTTP in Node   This example has similar functionality to the connect version but using even more lower-level APIs   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  This version uses the net module which is the lowest-level API for TCP sockets in Node   This example has some of the functionality of the http version but the minimal and incomplete HTTP protocol has been implemented from scratch  Since it doesn t support chunked encoding it loads the files into memory before serving them to know the size before sending a response because statting the files and then loading would introduce a race condition   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           Download examples  I posted all of the examples on GitHub with more explanation   Examples with express static  express  connect  http and net    https   github com rsp node-static-http-servers   Other project using only express static    https   github com rsp node-express-static-example   Tests  Test results are available on Travis    https   travis-ci org rsp node-static-http-servers   Everything is tested on Node versions 4  5  6  and 7   See also  Other related answers    Failed to load resource from same directory when redirecting Javascript onload js call not working with node Sending whole folder content to client with express Loading partials fails on the server JS Node JS not serving the static image

User · Answer

This may be a bit off-topic  since you are asking about static file serving via Node js specifically  where fs createReadStream    image demo jpg   pipe res  is actually a good idea   but in production you may want to have your Node app handle tasks  that cannot be tackled otherwise  and off-load static serving to e g Nginx    This means less coding inside your app  and better efficiency since reverse proxies are by design ideal for this

User · Answer

I agree with the other posters that eventually  you should use a framework  such as Express   but first you should also understand how to do something fundamental like this without a library  to really understand what the library abstracts away for you     The steps are    Parse the incoming HTTP request  to see which path the user is asking for Add a pathway in conditional statement for the server to respond to If the image is requested  read the image file from the disk  Serve the image content-type in a header Serve the image contents in the body   The code would look something like this  not tested   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

[node.js] How to serve an image using nodejs

Examples related to node.js