LoginSignup
1
0

More than 1 year has passed since last update.

expressでの静的ファイル指定方法

Posted at

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="テスト画像画像" />

これでディレクトリが深くなったりしても問題なく画像が表示できます。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0