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>

しかし、代わりに、何も表示されていません。

テキストを表示する「hithere」を書き込んだ後、response.end（）を入れてみました。その後、画像を表示するテキストと画像（ヘッダーを含む）の場所を入れ替えてみましたが、わかりません。実際のWebページのように、両方を同時に表示する方法を説明します。

同じウェブページにさまざまな種類のコンテンツを配置する方法を説明できますか？それらはさまざまな応答である必要がありますか？私が別の質問に出くわした何か：

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画像のエンコード/デコードがうまくいきません

これにより、テキストと画像の両方を送信する 1 つの応答が送信されます。応答に必要なヘッダーは 1 つだけですresponse.writeHead(200, {'content-type':'text/html'});

于 2013-02-15T12:20:26.363 に答える
1

特定のヘッダーに書き込むことができる値は 1 つのみであるため、2 番目のヘッダーは最初のヘッダーを上書きします。2つの解決策は

  1. html 内の画像への URL を書き出す - ユーザーにとっては少し遅くなります (画像を取得するために追加の http 要求が必要です)。
  2. 画像を data-uri 文字列に変換し、これを画像のソースとして html に含めます。最初のアプローチよりも実装が複雑で（ノードで変換を行うためのライブラリを知りません）、メリットはほとんどありません。
于 2013-02-14T23:57:11.620 に答える