http モジュール(node.js)で、ローカル画像ファイルを使用する。

この記事は、**httpモジュール**で、ローカル画像ファイルを使う方法を書き込んだ
個人的なメモです。

httpモジュール内で、画像を表示させる一番簡単な方法として、

画像アドレスを使用する

//html
<img src="http://○○○○○○">

//pug
img(src="http://○○○○○○")

が、あります。が、この方法は任意の画像をどこぞにアップロードして画像アドレスを
取得しなければなりません。
例えば私がN予備校の授業で作った**アンケートページ**では、
グーグルドライブに画像をアップロードして、そこからアドレスを取得して使っています。

尚、グーグルドライブの画像を使うにはちょっとクセがあります。

　グーグルドライブの画像を使う場合
グーグルドライブにアップロードした任意の画像→
右クリック→「共有可能なリンクを取得」で取得するURL　・・ではエラーになってしまいます。

//「共有可能なリンクを取得」でコピーできるURL
https://drive.google.com/open?id=○○○○○○○○○○

利用するには、このアドレスの「id=」の前を入れ替えます。

//表示用のアドレス
http://drive.google.com/uc?export=view&id=○○○○○○○○○○

↑表示用のアドレスでidを入れ替えればOK。

これでも十分なんですけどね。

##httpモジュール内のWebページでローカル画像を読み込ませる。
本題です。やり方としては、上に書いた通り、画像URL（画像が表示されるアドレス)があれば
画像が使えるので、画像を表示させるアドレス(パス)を作ります。
使用してる画像ファイル(参考
　buta.png
ファイル構成
index.js 　(http.createServerしてるファイル)
views 　　(ページをレイアウトするpugファイルなどなどを入れたディレクトリ)
　┣ pugファイル
　┗ images　 (画像ファイルを入れているディレクトリ)
　　　┣ buta.png

const fs=require("fs");　//　←　超重要(忘れやすい)

  switch (req.url) {
    case '/index':
      ${indexにリクエストが来た時に動く関数}(req, res);
      break;
    case '/images/buta.pug':  //　←　アドレスは任意。本当はuuidとか使うのがいいのかもしれませんが。
      res.writeHead(200, {
      'Content-Type': `image/png; charset=utf-8`  //　← ここがキモ！
      });
      var image = fs.readFileSync("./views/images/buta.png", "binary"); // ← ファイルpathはその環境に合わせてください
      res.end(image, "binary");
      break;
    default:
      break;
  }

switch文で画像アドレスを作り、そこにリクエストがきたらfsモジュールで画像を読み込んで表示させるというただそれだけです。
readFileはSyncにしないとエラーがでます。(私の環境だと)
※　jpg画像の場合は'Content-Type': `image/jpeg;です。(jpgではない)
これでローカル画像が使えます
例)
<img src="/images/buta.pug">

まとめ
Expressフレームワークは偉大

参考にさせてもらったContent-Typeまとめページ
　https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa