どのように取得使用してフロントエンドでHTTP（Node.jsの）を介して送信された画像を表示するには？

ブライアンイーニッド：

私はURLを取得しようとしている（はhttp：// localhostの）絵を返しますNode.js.を使用してHTTP経由（この時点では、拡張子は重要ではありません）

フロントエンド

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

バックエンド

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)

私はその写真を撮った後、ウェブサイトにそれを表示したいです。

イムは、ファイルを取得し、NOT SRC

アリエル：

直接HTMLのように：

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

またはでfetch、使用しましたcreateObjectURL：

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

作業のデモ：https://codepen.io/bortao/pen/oNXpvYR

どのように取得使用してフロントエンドでHTTP（Node.jsの）を介して送信された画像を表示するには？

おすすめ