How to display image inside HTML document using node.js [duplicate]

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 <" ?

Community · Accepted Answer · 2017-05-23 11:45:19Z

2

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

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Mar 15, 2016 at 9:35

MjZac

3,5541 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

aiden87 Over a year ago

where do i address my .html file? it's kinda confusing this code

Nidhin David Over a year ago

@fox Please use express framework. try googleing express.static

aiden87 Over a year ago

@NidhinDavid i would love to, but this is assignment for uni and we are not allowed to, not yet...

MjZac Over a year ago

@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.

Nidhin David Over a year ago

@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

|

Collectives™ on Stack Overflow

How to display image inside HTML document using node.js [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related