Eclipse Web 專案圖片引用失敗：資源放置位置與路徑解析規則

常見錯誤

將圖片放在 src/ 下的包目錄中（如 com.example.images/logo.png），在 JSP/HTML 中用相對路徑引用，部署後 404。

正確放置位置

• WebContent/（或 WebRoot/、webapp/）目錄下，與 WEB-INF/ 同級。
  例如：WebContent/images/logo.png
• 或在 WebContent/ 下建立資源文件夾：WebContent/resources/、WebContent/static/、WebContent/assets/。

引用路徑寫法

<!-- JSP 中使用相對項目根路徑 -->
<img src="<%=request.getContextPath()%>/images/logo.png">

<!-- HTML 純靜態頁（部署後同域） -->
<img src="/images/logo.png">  <!-- 以 / 開頭表示項目根 -->
<img src="images/logo.png">   <!-- 相對當前頁面 -->

Eclipse 部署驗證

1. 右鍵專案 → Properties → Deployment Assembly，確認 WebContent/ 映射到 /。
2. 發布到 Tomcat 後，查看 wtpwebapps/專案名/images/logo.png 是否存在。
3. 瀏覽器開發者工具 Network 面板查看圖片請求 URL 與狀態碼。

圖片格式建議

Web 通用格式：PNG、JPEG、GIF、SVG、WebP。避免 BMP、TIFF、PSD 等瀏覽器不直接支持的格式。