2009-10-19 90 views
0

我通過使鏈接樣式屬性爲服務器標籤來動態加載css文件。爲什麼在asp.net中動態加載css時不會加載圖像?

所有的CSS加載罰款除了圖像。它只是顯示替代文字。我在page_load事件中這樣做。

這裏是我的IMG標記的一個片段:

<img class="logourl" alt="Header" /> 

這裏是一個爲logourl的CSS:

.logourl 
{ 
background-image:url(../images/a-logo.png); 
width:169px; 
height:61px; 
margin-top:5px; 
} 

當我上的圖像和視圖屬性右擊,它是空白(大小,地址等)。

回答

1
<img class="logourl" alt="Header" /> 

<img>標籤可以有一個背景圖片屬性????這甚至沒有意義。

根據MSDN,img對象沒有這個屬性,所以我會說它是安全的,假設它不支持在IE中。

你確定你不想要一個跨度,超鏈接或其他背景圖像有意義的屬性嗎?

編輯

我剛纔讀@Justin格蘭特的回答。我想你可以在圖片標籤上使用背景圖片,但我保留我的答案,因爲這似乎是一個愚蠢的做法。如果你想要的是圍繞你的圖像的框架,我會創建一個具有設置寬度和高度的div或span,並且在它內部的img稍微更小。

+0

我試過

,但沒有顯示出來。 – Xaisoft 2009-10-19 22:25:28

+0

我動態設置鏈接的每個css文件對於logourl類都有不同的圖像。 – Xaisoft 2009-10-19 22:28:03

0

要在IMG標記上放置背景圖像,根據http://www.contentwithstyle.co.uk/content/css-background-image-on-html-image-element,您需要應用CSS填充並確保使用display:block。

另外,如果這是一個目錄路徑問題,則該圖像必須與其引用的CSS文件的位置相關。嘗試使用絕對路徑來驗證這確實是問題,然後嘗試使用各種相對路徑來查看它是否得到解決。

如果它仍然沒有解決,那麼我會建議嘗試Fiddler(www.fiddlertool.com),它可以讓你看到HTTP請求 - 特別是瀏覽器請求的實際URL。請務必在重新加載Fiddler下的頁面之前先清除緩存,以便確保實際發出請求而不是從緩存中提取。無論如何,將有三種可能的情況:

  1. Fiddler根本沒有顯示您請求URL。這指向您的CSS的一些問題(例如,未正確加載或語法錯誤)
  2. Fiddler顯示請求的圖像URL,但它顯示404(未找到)或其他錯誤。這意味着正在請求錯誤的URL,或者您的網站從該文件夾提供的圖像存在問題
  3. Fiddler顯示正確的URL,並且它從服務器獲得200狀態(成功)。如果發生這種情況,我很難過!

右鍵單擊只會顯示一個IMG標籤的SRC。當使用後臺CSS時,您需要查看源代碼。

+0

當我查看源代碼時,我看到樣式表已加載到頭部,並且圖像爲Header Xaisoft 2009-10-19 22:18:45

+1

這是預期的行爲。如上所述,右鍵單擊的東西只適用於SRC屬性,而不適用於通過CSS設置的背景圖像。您需要遵循上面鏈接的頁面中的建議,或者(更好)考慮使用DIV而不是IMG。 – 2009-10-20 00:08:58

+0

我試過一個div和一個跨度,也沒有工作。 – Xaisoft 2009-10-20 02:13:57

0

我不會調用動態加載CSS文件。您正在動態設置鏈接標記中的屬性,但CSS文件的加載方式與其他任何CSS文件的加載方式相同。瀏覽器沒有看到任何其他鏈接標記的差異,所以動態設置的url不是問題的一部分。

圖像和css文件位於何處?請記住,url是相對於CSS文件的位置,而不是頁面所在的位置。

請注意,即使您要爲圖像設置背景圖像,它仍然會在圖像頂部顯示替代文本並指示圖像未加載。 background-image屬性不會設置圖像的來源。你應該只使用div元素而不是圖像元素。

+0

圖像位於root/images文件夾中,css文件位於root/css文件夾中 – Xaisoft 2009-10-19 22:19:36

+0

@ Xaisoft:然後它看起來正確...再次檢查文件名...然後嘗試在圖像標記中添加src =「」它沒有損壞,或者嘗試使用div標籤。 – Guffa 2009-10-19 22:26:01

+0

我添加了src =「」,現在它實際上顯示了協議和圖像大小等屬性,但它僅顯示基本根路徑(http:// localhost),而不是http:// localhost/images /a-logo.png。 – Xaisoft 2009-10-19 22:29:59