Node.js - 載入靜態檔案 static

透過前面的練習可以知道透過 Node 編譯後可以透過 res.send() 渲染網頁標籤，但如何載入一張靜態圖片在網頁上呢？

假設我放一張圖片的在一個 images 的資料夾，那我想渲染圖片應該會是，

app.js

1
2
3

app.get("/", (req, res) => {
  res.send("<h1>這是 middleware 練習</h1>" + "<img src='./images/book.jpg'>");
});

執行 node app.js 後，會發現圖片並沒有被渲染，

browser

而打開 console 也會看到錯誤訊息，表示伺服器錯誤，找不到這支靜態檔案。

console

而 network 也是一樣的結果

network

因為 node 並無法「直接」渲染靜態元素。

透過 static 方法渲染靜態檔案

要透過 express 的靜態方法去找到要呈現的靜態檔案。需加上這一段，

app.js

1	app.use(express.static("public"));

意思是透過使用 express 套件中的 static 方法去找到靜態檔案的路徑資料夾，如果有靜態檔案要讀取，要把這一段寫在最前面，這樣後面的程式碼讀取資料後才能順利被渲染。把所有靜態的資料放在 public 資料夾裡面，這樣就可以取得靜態資料，重新啟動伺服器併重整畫面會看到呈現為：

自肥打一下新書

此時再打開開發人員工具查看網頁標籤，也會看到圖片順利渲染了。