網站圖片路徑大崩潰？一次搞懂網站部署時的圖片路徑問題

前言

在開發網站時，我們經常會遇到一個困擾：明明在本機開發環境中運作正常的圖片，部署到正式環境後卻突然無法顯示了。這個問題常常讓開發者感到困惑，今天就讓我們一次徹底搞懂這個問題！

問題情境

假設我們有以下情況：

  • 本機開發環境：http://localhost:56961/Project/
  • 正式環境：https://www.Project.com.tw/Project/
  • 圖片相對路徑：./Content/images/image.png

在本機環境一切正常，但部署到正式環境後，圖片路徑解析卻變成了：
https://www.Project.com.tw/Content/images/image.png

少了專案資料夾名稱 Project，導致圖片無法正確顯示。

為什麼會發生這種問題？

這個問題主要與網站的根目錄設定和相對路徑的解析有關。當我們使用 ./ 作為相對路徑時，瀏覽器會以當前頁面的位置作為參考點來解析路徑。在不同的環境配置下，這個參考點可能會有所不同。

解決方案

方案一：使用絕對路徑

1
2
/* 改用絕對路徑 */
background: url("/Project/Content/images/image.png");

優點：

  • 路徑明確，不受當前頁面位置影響
  • 在不同環境下表現一致

缺點：

  • 如果更改專案名稱，需要修改所有的路徑
  • 程式碼可讀性較差

方案二：使用 ASP.NET MVC 的 URL Helper

1
background: url('@Url.Content("~/Content/images/image.png")');

優點：

  • 動態產生正確的路徑
  • 維護性高

缺點：

  • 只能在 Razor 視圖中使用
  • 需要額外的伺服器處理

方案三：設定 HTML base tag（推薦）

1
2
3
<head>
    <base href="/Project/" />
</head>

優點：

  • 設定簡單
  • 一次設定，全站生效
  • 不需要修改現有的相對路徑
  • 維護方便

缺點：

  • 需要注意 base tag 的放置位置
  • 某些 JavaScript 操作可能需要考慮 base 路徑

最佳實踐建議

  1. 優先考慮使用 base tag 解決方案
  2. 在專案初期就規劃好路徑策略
  3. 建立統一的資源路徑處理機制
  4. 使用建置工具自動處理路徑問題

總結

網站路徑問題雖然看似簡單，但如果沒有正確處理，可能會造成許多困擾。通過本文介紹的方案，特別是使用 base tag 的方法，我們可以優雅地解決這個問題。記住，選擇適合自己專案的解決方案才是最重要的。

參考資料

  1. MDN - The base element
  2. ASP.NET MVC - URL Helper
  3. W3Schools - HTML base Tag