CODEWITHSUNDEEP
htmlnode.jspathtypescriptserver
eduardogbg
eduardogbg

Reputation: 573

Node.js: My HTML requires an image

See, I was training with Node (and TS btw), and tried to do a trivial server with multiple request/response options. But I have a problem I don't know how to solve without using Express (at least for now I don't want to use it).

I have a HTML file which requests an image file. While in the IDE, everything looks like it's going to work, but when the server is running, the image cannot be found. It's kind of obvious why: The HTML makes a request the server doesn't know how to handle. Thing is, I thought the document could refer to other files without the need of talking to the server.

What is an elegant and working solution for my problem?

Thanks in advance.

import * as http from 'http'
import * as fs from 'fs'

fs.readFile('doc/kmCNHkq.jpg', function (err, data) {
    let binaryimg = new Buffer(data).toString('base64'); 
    if (err) throw err;

    http.createServer(function (req, res) {
        res.writeHead(200, {'Content-Type': 'image/jpeg'});
        res.end(data);
        console.log("Delivered the jpeg");
    }).listen(8000); 

    http.createServer(function(req, res) {
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end(binaryimg);
        console.log("Delivered base64 string");
    }).listen(8124);

    console.log("Unless bug, both servers are listening");
});

fs.readFile('doc/index.html', function(err, data) {
    http.createServer(function(req,res) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data)
    }).listen(80);
    console.log("HTML server is running")
})

(main.ts; Targets ES6)

<html>
    <head>

    </head>

    <body>
        <img src="doc/kmCNHkq.jpg"/>
    </body>
</html>

(index.html)

Observation: I used to leave the HTML file in '../doc/' and resources on '../img/' however it seems that the HTML uses relative paths, so I copied the image into HTML's folder. If the solution also made it so I could leave the resources on their's respective folders it would be much appreciated.

@Edit: Now I'm using this switch/case request handler. Working as expected, the HTML's request for the image is interpreted as a normal request (which may not end up scaling well, idk, but screw it). Thanks a lot!

import * as http from 'http'
import * as fs from 'fs'

var stream: fs.ReadStream,
    folder = __dirname.substr(0, __dirname.length - 3);

http.createServer(function(req,res) {
    switch (req.url){
        case('/jpeg'):
            stream = fs.createReadStream(folder + 'img/kmCNHkq.jpg');
            stream.pipe(res);

            console.log("Delivering the jpeg");
            break;

        case('/base64'):
            fs.readFile('img/kmCNHkq.jpg', function (err, data) {
                let img64 = new Buffer(data).toString('base64');
                if (err) throw err;
                res.end(img64);

                console.log("Delivered base64 string");
            })

            break;

        case('/html'):
            stream = fs.createReadStream(folder + 'doc/index.html');
            stream.pipe(res);

            console.log("Sending the docs");
            break;

        default:
            console.log("Shit happens");
    }
}).listen(80)

(main.ts)

<html>    
    <body>
        <img src="jpeg"/>
    </body>
</html>

(index.html)

Upvotes: 0

Views: 77

Answers (1)

Tim Perry
Tim Perry

Reputation: 13256

Short answer:

You won't be able to refer to specific resources on the server (such as your image) unless your server knows how to respond to those requests for that content. It looks like you can probably make your example work easily immediately though by changing the image src to just http://localhost:8000 though.

Longer answer:

Using 'doc/kmCNHkq.jpg' as the src for your image tells your browser that when it loads the page, it should go to the server it got the page from, and ask it for the 'doc/kmCNHkq.jpg' resource. If you specify a full URL including the protocol (the http://) then it will be absolute, instead of relative, so you can request from a different server than the one that served the page.

The servers that you've written don't actually look at the path of the file that's requested though (req.url), and actually they just always return the same content. If you connect to http://localhost:80 (the third server you've created above), and do request that jpg you'll still just get given the same HTML data of the page, because it just runs the two lines in your createServer call at the end of your example. You have written a server that always returns the image however above (the first server), just running on a different port, which is why the above solution works.

Just using that existing server is the simplest solution. The far more conventional approach though is to have just a single HTTP server running on a single port (instead of the 3 you have) and to use req.url to decide what data to return.

Traditionally for static content that means mapping a requested path directly onto the layout of the files on disk, so that requesting doc/abc.jpg looks for a doc folder in the server's directory, and returns the data from abc.jpg therein. That's not required necessarily at all though, and your server can interpret those paths however you like, to return content from anywhere.

(Note than none of this is really anything to do with TypeScript, or even much to do with Node.js. This is really just the essentials of how HTTP servers and browsers interact, and it would be almost identical with any other backing technology. I'd take a look more into the general HTTP and browser details if you're looking to get more background on this.)

Upvotes: 1

Related Questions