Question

我正在尝试学习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'后显示文本，然后我尝试交换文本和图片的位置（包括标题），显示图片，但我可以弄清楚如何让两者同时显示，就像在真实的网页上一样。

您能否解释如何将不同类型的内容放入同一网页 - 他们是否需要采用不同的回复？我在另一个问题上遇到的事情：

nodejs - How to read and output jpg image?

这样的东西看起来像解决方案，但我无法弄清楚如何将此应用于我的情况（我在服务器方面没有很多经验。）

非常感谢

编辑：从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"/>')

，因为服务器似乎没有代表我做另一个请求来获取图像？它只是显示一个破碎的图标图像。

Answer 1

如果您如上所述进行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();

点击此处查看正确的图片转换NodeJS base64 image encoding/decoding not quite working

这会发送一个发送文本和图像的响应。响应response.writeHead(200, {'content-type':'text/html'});

只需要一个标头

Answer 2

您只能向给定标头写入一个值，因此第二个标头会覆盖第一个标头。有两种解决方案

在html中为图像写出一个url - 对于用户来说会稍微慢一点（需要额外的http请求来获取图像），但根据用例，这通常是可以接受的，并且实现起来非常简单
将图像转换为data-uri字符串，并将其包含在html中作为图像的来源。比第一种方法更复杂（我不知道任何用于在节点中进行转换的库）并且效果可以忽略不计。

Nodejs：如何返回具有相同响应（文本和图像）的不同内容类型？

2 个答案: