How to display image inside HTML document using node.js

Question

I'm displaying some text that i've created inside HTML file using node.js (by method createServer).

Everything was working fine until i added picture inside the document, which doesn't get display on the site.

This is my code

http.createServer(function (req, res) {

res.writeHead(200, { 'Content-Type': 'text/html'});


//read HTML
fs.readFile(__dirname + '//funkcionalnosti.html', function (err, data) {    
    console.log(data.toString());
    res.end(data);
});

This is my code for image inside HTML file

And this is where picture is located

Picture as located same as HTML file, so i dont any ../ are necessary in order for it ti work. I've also tried adding the ful path and subdirectories but the picture won't show.

I've also tried this that i found on stackoverflow, but it's still not working

var image_origial = "diagram.jpg";
fs.readFile(image_origial, function (err, original_data) {
    fs.writeFile('diagram.jpg', original_data, function (err) { });
    var base64Image = original_data.toString('base64');
    var decodedImage = new Buffer(base64Image, 'base64');
    fs.writeFile('diagram.jpg', decodedImage, function (err) { });
});

Also tried this

res.write('<img src="data:diagram.jpg/;base64,imagedata">');

Or this

res.write('<img src="data:diagram.jpg/jpg;base64,imagedata">');

But no luck so far, please help me out, im desperate

Any help will be appreciated!!!

How is this a duplicate to "bundle.js:1 Uncaught SyntaxError: Unexpected token <" ?

score 2 · Accepted Answer · edited May 23 '17 at 11:45

You need something like this. You haven't handled route for the image that you are trying to access.

var http = require('http');
var fs = require('fs');
var path = require('path');

http.createServer(function (request, response) {
    console.log('request starting...');

    var filePath = '.' + request.url;
    if (filePath == './')
        filePath = './index.html';

    var extname = path.extname(filePath);
    var contentType = 'text/html';
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        case '.json':
            contentType = 'application/json';
            break;
        case '.png':
            contentType = 'image/png';
            break;      
        case '.jpg':
            contentType = 'image/jpg';
            break;
        case '.wav':
            contentType = 'audio/wav';
            break;
    }

    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT'){
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                });
            }
            else {
                response.writeHead(500);
                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
                response.end(); 
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });

}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');

Original Answer https://stackoverflow.com/a/29046869/2861108

where do i address my .html file? it's kinda confusing this code — aiden87, Mar 15 '16 at 09:48
@fox Please use express framework. try googleing express.static — Nidhin David, Mar 15 '16 at 09:50
@NidhinDavid i would love to, but this is assignment for uni and we are not allowed to, not yet... — aiden87, Mar 15 '16 at 09:51
@fox You just need to place this code in an `index.js` file in same directory which you want to be root directory of your server. — MjZac, Mar 15 '16 at 09:54
@fox Try the above answer. It must solve your issue. The issue is that there is no route or handler for the images route. Without using frameworks you must add your own route/handlers — Nidhin David, Mar 15 '16 at 09:56
@MjZac yeh i did, but it wasn't working, but then i saw the port was different to mine, so i changed it. thank you very much it works now!!! — aiden87, Mar 15 '16 at 09:58
@NidhinDavid thanks man, hope we can start using express asap :) — aiden87, Mar 15 '16 at 09:59

How to display image inside HTML document using node.js

1 Answers1