透過前面的練習可以知道透過 Node 編譯後可以透過 res.send() 渲染網頁標籤,但如何載入一張靜態圖片在網頁上呢?
假設我放一張圖片的在一個 images 的資料夾,那我想渲染圖片應該會是,
app.js
app.get("/", (req, res) => {
res.send("<h1>這是 middleware 練習</h1>"+ "<img src='./images/book.jpg'>");
});
執行 node app.js 後,會發現圖片並沒有被渲染,
browser
而打開 console 也會看到錯誤訊息,表示伺服器錯誤,找不到這支靜態檔案。
console
而 network 也是一樣的結果
network
因為 node 並無法「直接」渲染靜態元素。
要透過 express 的靜態方法去找到要呈現的靜態檔案。需加上這一段,
app.js
app.use(express.static('public'));
意思是透過使用 express 套件中的 static 方法去找到靜態檔案的路徑資料夾,如果有靜態檔案要讀取,要把這一段寫在最前面,這樣後面的程式碼讀取資料後才能順利被渲染。把所有靜態的資料放在 public 資料夾裡面,這樣就可以取得靜態資料,重新啟動伺服器併重整畫面會看到呈現為:
自肥打一下新書
此時再打開開發人員工具查看網頁標籤,也會看到圖片順利渲染了。