2016-01-28 18 views
2
background: url('img/edu2.jpg') center center no-repeat scroll; 

此圖像在localhost中正常工作。當我將它部署到Github時,Heroku會自動部署它。然而,Heroku一直告訴我它無法獲取這個圖像,並且服務器以404的狀態迴應。Heroku Nodejs服務器img文件不斷得到404

那麼我該怎麼做?

回答

1

在谷歌瀏覽器中(類似於其他瀏覽器):右鍵單擊圖像Inspect。在元素選項卡下,您可以在右側框架(樣式)中看到所有CSS樣式。向下滾動到background並檢查它實際採用的圖像路徑(絕對地址)。您可以將鼠標懸停在相應的地址上(或右鍵單擊,在新選項卡中打開),以查看絕對地址。然後,檢查這是否正確(顯然不是)。

問題是,img/edu2.jpg是相對於HTML文件的路徑。如果您在開頭添加/,它將以網站的根作爲其相對基礎。

+0

我在開頭添加了一個/,但它仍然無效。我遵循你的程序,它仍然顯示了這個空白頁面,並顯示「Can not GET /img/edu2.jpg」消息。並且該空白頁面的URL是「https://mark-wen-home.herokuapp.com/img/edu2.jpg」 – thousight

+0

圖像(絕對)的正確路徑是什麼?您需要修改相對URL,以便鏈接到正確的絕對URL。相對URL開頭的''/''使它只相對於根路徑。如果這不是正確的鏈接,那麼它顯然不起作用。 –

+0

這是相對的我想。只有這個特定的圖像不能工作,在同一個文件夾中的其他人工作正常 – thousight

1

這很好,可能是相對路徑的問題。第一步是通過查看瀏覽器開發人員工具中的控制檯來發現瀏覽器試圖獲取資源的URL。如果您鏈接面臨此錯誤的網站以及其背後的源代碼,以便外部人員可以對其進行調試,這將非常有幫助。

相關問題