如何使用 Fetch 在前端显示通过 HTTP (Node.js) 发送的图像？

Posted 2023-03-07

【中文标题】如何使用 Fetch 在前端显示通过 HTTP (Node.js) 发送的图像？

【英文标题】：How to display an Image sent through HTTP (Node.js) in the Front End using Fetch?

【发布时间】：2020-06-20 22:26:48

【问题描述】：

我正在尝试使用 Node.js 通过 HTTP 获取一个 URL (http://localhost)，它将返回一张图片（此时，扩展名无关紧要）。

前端

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)

我想拍下那张照片，然后将其显示到网站上。

我得到的是文件，而不是 SRC

【问题讨论】：

你的意思是设置图片标签的src？你能发布你的html代码吗？

不是我需要的src，因为我是通过HTTP传递完整的文件

在客户端上fetching 图像可能毫无意义。只需在 HTML 中使用 <img src='yourSource.png' /> 或在前端 javascript 中使用 imgElement.src = 'yourSource.png';。

问题是我在命令行中使用 TWAIN 和 WAI 从扫描仪获取图片。所以你的意思是我必须把那张照片上传到另一台服务器，这样我才能得到一个 src

如果您在http://localhost:3031 提供图像，这就是您将其src 设置为，即<img src="http://localhost:3031" />。通常，如果您想以某种方式处理其二进制数据，您只需要在脚本中获取图像。

【参考方案1】：

直接在 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

【讨论】：

这正是我想要的。非常感谢！