node.jsで画像がうまく表示されない

Question

現在私はnode.jsを学習中で画像を表示させたいのですが、うまく表示されません。エラーが出ていないところから、おそらく画像を読み込むところまではうまくいっているのではないかと思います。私が思うにフォルダのパスよりもfs.readFileSyncのあたりで間違った読み込み方をしているのではないかと思うのですが、どう思われますか？

関係ないコードは省いています↓

var fs=require("fs");
var server=require("http").createServer(function(req,res){

  switch(req.url){
    case '/':
      res.writeHead(200,{"Content-Type":"text/html"});
      var output=fs.readFileSync("./index.html","utf-8");
      res.end(output);
      break;
    case '/load/sss.png':
      res.writeHead(200,{"Content-Type":"image/png"});
      var output2=fs.readFileSync("./load/sss.png","binary");
      res.end(output2);
      break;
  }

}).listen(8081);
var io=require("socket.io").listen(server);

<img src="load/sss.png">

ディレクトリの構成
| node_modules
| app.js
| index.html
| load → sss.png

Answer 1

Node.jsのバージョンがわかりませんが、v11.1.0であれば、readFileおよびreadFileSyncは、第2引数にencodingを指定すると文字列を返し、指定しない場合はBufferを返します(引用)。

If the encoding option is specified then this function returns a string. Otherwise it returns a buffer.

syoshinshaさんのコードでは、文字列として取得したoutput2を{"Content-Type":"image/png"}として返却しているため不具合が起きているものと思われます。

以下のどちらかで対処できます。

1. Bufferとしてファイルを読み込み、そのまま送信する(こちらがいいと思います)

...
case '/load/sss.png':
  res.writeHead(200,{"Content-Type":"image/png"});
  var output2=fs.readFileSync("./load/sss.png");
  res.end(output2);
  break;
...

1. 文字列(バイナリー)としてファイルを読み込み、バイナリーであることを明示して送信する

...
case '/load/sss.png':
  res.writeHead(200,{"Content-Type":"image/png"});
  var output2=fs.readFileSync("./load/sss.png", "binary");
  res.end(output2, "binary");
  break;
...

蛇足

処理をブロッキングするreadFileSyncよりも、非同期のreadFileの方がいいかもしれません。

Comments

[退会済みユーザー]

ありがとうございます。おかげで読み込めました。readFileを使うことも検討してみます。

[NozomuIkuta]

解決したようでよかったです。