Cómo mostrar una imagen enviada a través de HTTP (Node.js) en el extremo delantero usando Fetch?

Bryan Enid:

Estoy tratando de Fetch una dirección URL ( http: // localhost ) que devolverá una imagen (en este momento, la extensión no importa) a través de HTTP utilizando Node.js.

Interfaz

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)

Quiero tomar esa imagen y luego mostrarlo en el sitio web.

Im conseguir el archivo, no el SRC

Ariel:

Directamente en el HTML como:

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

O con fetch, el uso de createObjectURL:

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

Demostración de trabajo: https://codepen.io/bortao/pen/oNXpvYR