How to display images using node.js server?
<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>