title: How to display images using node.js server?
body: <p>I've created a local server on port 3333 using node.js. My problem is that I cannot display local images. External images can be displayed. Can someone say to me if there is a solution to this without using Express? And if yes what would that solution be? All I'm trying to do is display an image but it's not working. Also is there a way to add a stylesheet to my code?</p>
  
  <p>Using Express is it possible to load files with the existing node server?</p>
  
  <p>The code I've tried to display local images(I've tried and other solutions, you can see in my whole code, no luck):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>res.write('&lt;img src="data:image/jpeg;base64,http://localhost:3333/images/top-band.png')
  res.write(new Buffer(content).toString('base64'));
  res.write('"/&gt;');</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the whole code here: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//include http, fs and url module
  var http = require('http'),
      fs = require('fs'),
      path = require('path'),
      url = require('url');
      imageDir = 'C:/Users/Ionut/maguay/node/';
   
  //create http server listening on port 3333
  http.createServer(function (req, res) {
      //use the url to parse the requested url and get the image name
      var query = url.parse(req.url,true).query;
          pic = query.image;
    console.log(pic);
   
      if (typeof pic === 'undefined') {
          getImages(imageDir, function (err, files) {
              var imageLists = '&lt;ul style="padding: 0; margin: 0;"&gt;';
              for (var i=0; i&lt;files.length; i++) {
                  imageLists += '&lt;li style="list-style-type: none;"&gt;&lt;a href="/?image=' + files[i] + '"&gt;&lt;img src="http://localhost:3333/' + files[i] + '"&gt;&lt;/li&gt;';
              }
              imageLists += '&lt;/ul&gt;';
              res.writeHead(200, {'Content-type':'text/html'});
              res.end(imageLists);
          });
      } else {
          //read the image using fs and send the image content back in the response
          fs.readFile(imageDir + pic, function (err, content) {
              if (err) {
                  res.writeHead(400, {'Content-type':'text/html'})
                  console.log(err);
                  res.end("No such image");    
              } else {
                  //specify the content type in the response will be an image
                  //res.writeHead(200,{'Content-type':'image/png'});
       res.writeHead(200, {'Content-type':'text/html'})
       //res.writeHead(200, {'Content-type':'text/html'})
       //res.write("&lt;link rel='stylesheet' href='style.css?v=123132'&gt;")
      
       var pic_cuv = pic.replace('.png','.txt');
      fs.readFile(imageDir + pic_cuv, function (errc, cuvcontent) {
       if (!err) {
           res.write("&lt;style&gt;body{margin: 0; padding: 0;} #main-container{ margin: 0 auto; width: 1520px; height: 1000px; display: table-cell; vertical-align: middle;} @media print{* {-webkit-print-color-adjust:exact;}} #words{padding:0; margin: 0; display: inline-block;} #words li{ list-style-type: none;  display: inline-block; width: 33.33%;} #words li img{ width: 100%; }&lt;/style&gt;");
           var threeWords = cuvcontent.toString();
        threeWords = threeWords.split('&amp;h=250&amp;w=1000&amp;zc=0&amp;q=100');
        
        //res.write(threeWords);
        res.write("&lt;div id='main-container' style='background: transparent url(data:image/png;base64,"+ new Buffer(content).toString('base64') +") no-repeat center;'&gt;");
         res.write('&lt;img src="/images/top-band.png"/&gt;');
         
         res.write('&lt;img src="data:image/jpeg;base64,/images/top-band.png')
         res.write(new Buffer(content).toString('base64'));
         res.write('"/&gt;');
         
         res.write('&lt;ul id="words"&gt;');
          for(var i=0; i&lt;threeWords.length; i++){
           //console.log(threeWords[i]);
           if(threeWords[i]){
            res.write('&lt;li&gt;');
             res.write('&lt;img src="' + threeWords[i] + '&amp;h=250&amp;w=1000&amp;zc=0&amp;q=100"/&gt;');
            res.write('&lt;/li&gt;');
           }
          }
         res.write('&lt;/ul&gt;');
        res.write("&lt;/div&gt;");
       
         
        /*res.write('&lt;img src="data:image/jpeg;base64,')
         res.write(new Buffer(content).toString('base64'));
          res.write('"/&gt;');*/
       }
       
        res.end();
      });
                 
              }
          });
      }
   
  }).listen(3333);
  console.log("Server running at http://localhost:3333/");
   
  //get the list of png files in the image dir
  function getImages(imageDir, callback) {
      var fileType = '.png',
          files = [], i;
      fs.readdir(imageDir, function (err, list) {
   
          for(i=0; i&lt;list.length; i++) {
              if(path.extname(list[i]) === fileType) {
                  files.push(list[i]); //store the file name into the array files
              }
          }
          callback(err, files);
      });
  }</code></pre>
  </div>
  </div>
  </p>