9

我正在尝试学习 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()，它显示文本，然后我尝试交换文本和图片的位置（包括标题），它显示了图片，但我不知道了解如何让两者同时显示，就像在真实的网页上一样。

你能解释一下如何将不同类型的内容放到同一个网页上——它们是否需要在不同的响应中？我在另一个问题上遇到的事情：

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"/>')

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

4

2 回答 2

3

如果您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 图像编码/解码不太工作

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

于 2013-02-15T12:20:26.363 回答
1

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

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