2014-10-03 138 views
0

我試圖在使用img src標記的網頁頁腳處顯示社交媒體圖標(應該很簡單)。圖像沒有顯示,我找不到問題。img src標記不顯示圖像

HTML

<div class="mastfoot"> 
<div class="inner"> 
<p><a href="#"><img src="/images/twitter.png"></a></p> 
</div> 
</div> 

CSS

.mastfoot { 
position: fixed; 
bottom: 0; 
} 

我可能俯瞰提前一些簡單但非常感謝!

這是我在瀏覽器中檢查圖像文件時得到的結果。

enter image description here

下面是CSS內部類

.site-wrapper-inner { 
display: table-cell; 
vertical-align: top; 
} 

.inner { 
padding: 30px; 
} 

.site-wrapper-inner { 
vertical-align: middle; 
} 
+0

Works fine http://jsfiddle.net/opsh1os8/ – 2014-10-03 14:17:59

+0

確保路徑正確。試試images/twitter.png而不是/images/twitter.png。你可以添加內部類的CSS源代碼嗎? – eiKatte 2014-10-03 14:26:18

+0

確保你的圖像名稱是正確的..並沒有像「#」 – 2016-04-15 05:33:18

回答

1

固定的問題,我將路徑重定向到我的資產文件夾,它是映像文件夾所在的位置,

<img src="assets/twitter.png"> 

它的工作。不過,真的不知道爲什麼!

+0

小心,您可能指向錯誤的文件夾或錯誤的圖像。你可能有2個相同的twitter圖像。如果這是一個可以投入使用的項目,那麼當你投入主機時,它可能會中斷。 – 2014-10-03 14:48:44

+0

@nextstep我在Chrome Canary 64中有一個透明的twitter徽標,完全一樣的問題。你不瘋狂......有一個問題。圖像確實以33kb 200代碼形式出現,但是是0x0px。顏色版本加載得很好。 – BenRacicot 2017-11-07 20:51:11

1

我要說的是,圖像不在目錄或將src路徑是不正確的代碼。

在控制檯中,你會得到任何404錯誤?

+0

我剛剛得到圖像被認爲是破碎的圖像標籤。我會在我原來的帖子中添加一個截圖。 – nextstep 2014-10-03 14:25:41

2

打開您的控制檯(在大多數瀏覽器中右鍵單擊+檢查元素),查看您的圖像URL是否損壞。

您也可以點擊它生成的網址。機會是在路徑開始的/不是你想要的。這將轉到您的根路徑,而不是當前目錄。嘗試使用images/twitter.png來代替。

你正在尋找的路徑可能是這樣的:

http://localhost/myproject/images/twitter.png 

因爲初始/但是,這是你的瀏覽器將尋找的網址:

http://localhost/images/twitter.png