如何引用express.js中的佈局圖像，以便可以從嵌套目錄中找到它們？

Question

我有一個express.js應用程序當前正在使用ejs（對新項目使用jade），我試圖以一種乾淨和適當的方式解決問題。

我有一個layout.ejs文件，裏面有我的頁眉和頁腳。到目前爲止，我的網站大部分已深入一層http://innovationbound.com/about或/ services或/ amy等等。

我開始在http://innovationbound.com/courses/course-name創建在線課程，我遇到的問題是這些課程頁面不能以相同的方式引用圖像。例如<img src="images/linknedin.png" alt="LinkedIn Icon">。

從課程名稱頁面嘗試<img src="courses/images/LinkedIn.png" alt="LinkedIn Icon">，顯然不能抓住那裏的圖像。

是否有快速設置或明顯缺少的東西？我希望我不必使用絕對的URL，這隻會讓本地機器的開發變得瘋狂。

Answer 1

只需使用站點根相對路徑。例如<img src="/images/linknedin.png" alt="LinkedIn Icon">。請注意0​​有所不同。

有三種類型的鏈接路徑：

• 絕對路徑（如http://www.adobe.com/support/dreamweaver/contents.html）。

• 文檔相對路徑（如dreamweaver/contents.html）。

• 站點根相對路徑（如/support/dreamweaver/contents.html）。

從Adobe。

Answer 2

你可能會考慮它，但你可以使用「../images/link(n?)edin.png」。但是，我建議使用絕對路徑，因爲圖像應該存儲在/ public（通常是jade設置）中，並且您的路徑深度可以根據您的路線規則而變化。

作爲提示，如果您丟失了圖像的相對路徑，請右鍵單擊損壞的圖像並在Web瀏覽器中查看屬性中的URL。它會給你提示圖像的位置。