Nodejs:如何返回具有相同响应(文本和图像)的不同内容类型?

xdl*_*xdl 8 javascript node.js

我正在尝试学习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);
});
Run Code Online (Sandbox Code Playgroud)

理想情况下应该提供的是:

<html>
<body>
<p>hi there</p>
<img src='my_pic.jpg'/>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

但相反,什么都没有出现.

我试图把一个到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);
});
Run Code Online (Sandbox Code Playgroud)

这似乎在嵌入图像方面做了很多工作 - 如果我想放入多个图像,我必须继续嵌套那些文件流回调?

我也尝试过这种方式,但它不起作用:

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);
});
Run Code Online (Sandbox Code Playgroud)

我不确定这是否是人们的意思

response.write('<img src="my_pic.jpg"/>')
Run Code Online (Sandbox Code Playgroud)

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

use*_*109 3

如果您response.write('<img src="my_pic.jpg"/>');按照上面提到的方式进行操作,则仅当浏览器发送图像的 GET 时才会发送图像文件。它将成为多部分请求。

或者你也可以这样做。可以以 HTML 的二进制形式发送图像。使用 :

<img src="data:image/gif;base64,imagedata">
Run Code Online (Sandbox Code Playgroud)

其中 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();
Run Code Online (Sandbox Code Playgroud)

检查此处是否正确的图像转换NodeJS base64 图像编码/解码不太工作

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