在JSP頁面中使用CSS引用的圖像

我在寫一個java servlet（struts/JSP等）。我試圖在JSP頁面中使用CSS來設置進度條的樣式，但在使用chrome的開發人員工具時會出現此錯誤：在JSP頁面中使用CSS引用的圖像

將資源解釋爲圖像，但使用MIME類型text/plain進行傳輸。

<％@包括文件= 「../包括/ CSS/default.css」％>

並在CSS文件中：

背景：網址（../圖像/ bg_bar .gif）no-repeat 0 0;

任何人都可以解釋爲什麼這是，並顯示如何我可以在我的網頁中使用這個CSS？

啊......我得到了你的問題在哪裏。你正在用@include包含css，所以它將整個css文件插入到你的html代碼中。

結果將是這樣的：

localhost:8080/GraphBuilder/yourpage.htm 

<html> 
... 
<style> 
.myId { 
background:url(../images/bg_bar.gif) no-repeat 0 0; 
} 
</style> 
...

現在，看着網頁的地址，你認爲哪裏會它試圖找到的形象呢？沒錯，在localhost:8080/GraphBuilder/../images/bg_bar.gif - >localhost:8080/images/bg_bar.gif。

您有2個選項來解決這個問題：

相反@include的，使用簡單的<style type="text/css" src="include/css/default.css"/>。這將使它在路徑localhost:8080/GraphBuilder/include/css/default.css中尋找css。和css將在localhost:8080/GraphBuilder/include/css/../images/bg_bar.gif - >localhost:8080/GraphBuilder/include/css/images/bg_bar.gif中查找圖像。
保持原樣，但將css文件中的路徑更改爲'include/images/bg_bar.gif'。然而，這個解決方案比第一個更糟糕，因爲在HTML文件中包含css很糟糕。

2010-06-16 10:47:05 bezmax

這確實解決了這個問題。非常感謝你。 – 2010-06-16 16:13:25

沒問題。請接受答案（接近票數的V標誌）。 – bezmax 2010-06-16 16:51:34

我的猜測是你得到一個錯誤頁面，而不是圖像。嘗試在瀏覽器中輸入圖像的完整路徑，看看它是否有效。那就是：http://domain/app/include/images/bg_bar.gif

如果你得到一個錯誤 - 那麼你的問題是你的圖像不能公開。

2010-06-16 09:29:00 bezmax

工作正常。我可以看到圖像。 – 2010-06-16 09:39:41

好的，嘗試檢查chrome是否從您手動執行的相同路徑加載圖像。如果它使用相同的路徑 - 嘗試手動加載圖像時檢查響應頭，請檢查「內容類型」部分。 – bezmax 2010-06-16 09:43:54

好吧，鉻在這裏看：http：// localhost：8080/images/bg_bar.gif我從這裏加載http：// localhost：8080/GraphBuilder/include/images/bg_bar.gif – 2010-06-16 10:02:45

回答