Node.js：如何以相同的响应（文本和图像）返回不同的内容类型？

宰父霖

2023-03-14

问题内容：

我正在尝试学习nodejs，我认为做到这一点的最佳方法是尝试做一些事情而不使用express或任何其他非核心模块。我一直试图让一些文本和图像同时传递。我正在尝试的代码是：

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

var server = http.createServer(function(request,response) {

    fs.readFile('my_pic.jpg', function(error, file) {
        response.writeHead(200, {'content-type':'text/html'});
        response.write('<p>hi there!</p>');

        response.writeHead(200, {'content-type':'image/jpg'});
        response.write(file, 'image');

        response.end();
    });

});

var port = process.env.PORT || 8080;

server.listen(port, function() {
    console.log('Listening on port ' + port);
});

因此，理想的情况是：

<html>
<body>
<p>hi there</p>
<img src='my_pic.jpg'/>
</body>
</html>

但是，什么也没出现。

我写完“ hi
there”之后尝试放置一个response.end（），以显示文本，之后我尝试交换文本和图片（包括标题）的位置，以显示图片，但是我不知道了解如何使两者同时显示，例如在真实的网页上。

您能解释一下如何将不同类型的内容放到同一网页上吗？它们需要采取不同的应对措施吗？我遇到另一个问题：

nodejs-如何读取和输出jpg图像？

类似的东西看起来像解决方案，但我不知道如何将其应用于我的情况（我在服务器方面没有太多经验。）

非常感谢

编辑：从user568109的答复得到它的工作：

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


var server = http.createServer(function(request,response) {
fs.readFile('my_pic.jpg', function(error, file) {

    var imagedata = new Buffer(file).toString('base64');

    response.writeHead(200, {'content-type':'text/html'});
    response.write("hi there!<img src='data:my_pic.jpg;base64,"+imagedata+"'/>");
    response.end();

    });

});

var port = process.env.PORT || 8080;

server.listen(port, function() {
    console.log('Listening on port' + port);
});

但是，在嵌入图像方面，这似乎需要做很多工作-如果我想放入多个图像，则只需要继续嵌套那些文件流回调即可？

我也尝试过这种方法，但是没有用：

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

var server = http.createServer(function(request,response) {

    response.writeHead(200, {'content-type':'text/html'});
    response.write("hi there!<img src='my_pic.jpg'/>");
    response.end();

});

var port = process.env.PORT || 8080;

server.listen(port, function() {
    console.log('Listening on port' + port);
});

我不确定这是否就是人们所说的话

response.write('<img src="my_pic.jpg"/>')

，因为服务器似乎没有代表我发出另一个请求以获取图像？它只是显示一个损坏的图标图像。

问题答案：

如果您response.write('<img src="my_pic.jpg"/>');如上所述进行操作，则仅当浏览器为图像发送GET时，才会发送图像文件。这将成为多部分请求。

或者您可以这样做。可以以HTML二进制格式发送图像。用：

<img src="data:image/gif;base64,imagedata">

其中imagedata是gif图像的base64编码。所以在node.js中这样做：

//Write text in response.
content = get-image-file-contents;     //store image into content
imagedata = new Buffer(content).toString('base64');    //encode to base64
response.write('<img src="data:image/gif;base64,'+imagedata+'">');//send image
response.end();

这发送一个响应，该响应同时发送文本和图像。只需一个标头即可响应response.writeHead(200, {'content-type':'text/html'});

Node.js：如何以相同的响应（文本和图像）返回不同的内容类型？

相关阅读

相关文章

相关问答

相关工具

相关文档