Nodejs:如何使用相同的响应(文本和图像)返回不同的内容types?

我试图学习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> 

但是,没有任何东西出现。

我写了一个response.end()之后,写着'hi there',显示文本,然后我试着交换显示图片的文本和图片(包含头文件)的位置,但是我无法确定了解如何让两者同时显示,就像在真实的网页上一样。

你能解释一下怎么把不同types的内容放到同一个网页上吗?他们需要不同的回答吗? 我遇到另外一个问题:

nodejs – 如何读取和输出jpg图像?

像这样的东西看起来像解决scheme,但我不知道如何将这个应用到我的情况(我没有很多在服务器端的经验)。

非常感谢

编辑:得到它从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); }); 

这看起来像embedded图像很多工作 – 如果我想放入多个图像,我不得不继续嵌套这些文件streamcallback?

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

 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格式以二进制forms发送图像。 使用 :

 <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图像编码/解码不太正常

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

您只能将一个值写入给定的标题,因此第二个标题将覆盖第一个标题。 两个解决scheme是

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