How to display an Image sent through HTTP (Node.js) in the Front End using Fetch?

Question

I'm trying to Fetch a URL (http://localhost) that will return a picture (At this moment, the extension doesn't matter) through HTTP using Node.js.

Front End

let image = await fetch('http://localhost:3031', {
   mode: 'cors',
   method: 'GET'
})

Back End

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

http.createServer(function (req, res) {
    res.setHeader('Content-Type', 'image/png');
    fs.readFile('image.png', (err, data) => {
        res.write(data, "binary");
        res.end();
    });
}).listen(3031)

I want to take that picture and then display it into the Website.

Im getting the file, NOT THE SRC

you mean setting the src of an image-tag? Can you post your html codes? — Fernand
– Fernand, Commented Mar 9, 2020 at 1:30
Is not the src I need, because I'm passing the complete file through HTTP — Bryan Enid
– Bryan Enid, Commented Mar 9, 2020 at 1:33
There is probably no point in fetching an image at all on the Client. Just use <img src='yourSource.png' /> in HTML or imgElement.src = 'yourSource.png'; in Front End JavaScript. — StackSlave
– StackSlave, Commented Mar 9, 2020 at 1:46
The thing is im using TWAIN and WAI in the command line to get the picture from an Scanner. So you mean i have to upload that picture to another server soIi can get a src — Bryan Enid
– Bryan Enid, Commented Mar 9, 2020 at 2:00
If you're serving the image at http://localhost:3031, that's what you set its src to, i.e. <img src="http://localhost:3031" />. Usually, you only need to fetch the image in your script if you want to somehow process its binary data. — shkaper
– shkaper, Commented Mar 9, 2020 at 2:43

ariel · Accepted Answer · 2020-03-09 04:06:04Z

2

Directly in the HTML as:

<img id="loadedimage" src="http://localhost:3031/"/>

Or with fetch, using createObjectURL:

var element = document.getElementById('loadedimage');
var response = await fetch('http://localhost:3031');
var image = await response.blob();
element.src = URL.createObjectURL(image);

Working demo: https://codepen.io/bortao/pen/oNXpvYR

edited Mar 9, 2020 at 4:06

answered Mar 9, 2020 at 3:48

ariel

16.2k13 gold badges65 silver badges75 bronze badges

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

1 Comment

Bryan Enid Over a year ago

This is exactly what i was looking for. Thank you so much!

Collectives™ on Stack Overflow

How to display an Image sent through HTTP (Node.js) in the Front End using Fetch?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related