NodeJSのexpressを使用してWEBアプリを作った際に画像ファイルの読み込みで苦労したので備忘録として記載する
簡単なファイル構成
※内容の説明に不要なものは記載を省略
root
├ public
| ├ img
| | └ exsample.png
| ├ css
| └ JavaScript
├ views
| ├ contact
| | └contact.ejs
| └ iundex.ejs
└app.js
まずはapp.jsで静的なファイルが使えるようにする
app.js
app.use("/public", express.static("public"));
これによって/publicを公開され、全HMLファイル(今回はejsファイル)で使用できるに用なる
あとはejsファイルで以下のように記載するだけ
index.ejs
<img src="/public/img/example.png" alt="テスト画像画像" />
ejsファイルのディレクトリの階層が変わっても問題ないです
contact.ejs
<img src="/public/img/example.png" alt="テスト画像画像" />
これでディレクトリが深くなったりしても問題なく画像が表示できます。