iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
Modern Web

Node.js 從零開始系列 第 29

Node.js - 載入靜態檔案 static

  • 分享至 

  • xImage
  •  

node

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

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

app.js

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

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

browser

static

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

console

404

而 network 也是一樣的結果

network

network

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

透過 static 方法渲染靜態檔案

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

app.js

app.use(express.static('public'));

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

book

自肥打一下新書

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

element


上一篇
Node.js - middleware 基礎介紹
下一篇
Node.js - EJS 介紹與起手式
系列文
Node.js 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言