從文件預覽時沒有顯示圖像

嗨，我是一個新手程序員，我正在製作我的第一個網站。我在Mac上工作，每當我直接從finder預覽文件時，即使路徑正確，我的CSS和Images也不會顯示出來。當我在Dreamweaver CS6和Brackets中預覽文件時，視線看起來完全是我想要的，但是當我選擇直接從文件預覽時看不到。這裏是CSS和HTML文件。任何建議將不勝感激。謝謝You.Here是發生了什麼Here 從文件預覽時沒有顯示圖像

@charset "UTF-8"; 
/* CSS Document */ 

#menuBar{ 
    position: fixed; 
    width: 100%; 
    top: -10px; 
    right: 0px; 
    z-index: 2; 
} 

#logo { 
    position: fixed; 
    z-index: 3; 
    right:1100px; 
} 

#menuButton, #aboutButton, #locationButton, #cateringButton{ 
    position: fixed; 
    z-index: 4; 
    color: white; 
    font-family:Futura; 
    font-size:10px; 
    top:30px; 
} 

#menuButton { 
    right:610px; 
} 

#aboutButton { 
    right:475px; 
} 

#locationButton{ 
    right:308px; 
} 

#cateringButton{ 
    right:150px; 
} 

#facebookButton{ 
    right:60px; 
    top:40px; 
    position: fixed; 
    height:40px; 
    width: 50px; 
    z-index:5; 
}

<!DOCTYPE HTML> 
<html> 
<body> 
<link href="Roundhouse/CSS/homePage.css" type="text/css" rel="stylesheet" /> 

<div id="menuBar"><img src="Roundhouse/Images/MenuBar.png" alt="menu Bar" width="100%" height="125px" /> 
    </div> 
<div id="logo"> 
<img src="Roundhouse/Images/Round-House.gif" alt="logo" width="100px" height="100px" /></div> 

<div id="menuButton"> 
    <h1>MENU</h1> 
    </div> 
<div id="aboutButton"> 
    <h1>ABOUT</h1> 
    </div> 
<div id="locationButton"> 
    <h1>LOCATION</h1> 
    </div> 
<div id="cateringButton"> 
    <h1>CATERING</h1> 
    </div> 
<div id="facebookButton"> 

<a href="https://www.facebook.com/RoundhouseBBQ/?rf=205148012847894" target="_blank"> <img src="Roundhouse/Images/facebooklogo.png" border="0" alt="facebook" height="30px" width="30px" > 
</a> 
</div> 

</body> 

</html>

來源

2016-03-15 KaylaKett13

你可以截圖的結果是什麼？ – mmativ

我將它添加到說明 – KaylaKett13

檢查開發人員工具，並檢查您的路徑是否正確。 – mmativ

檢查的路徑是正確的，如果該文件夾RoundHouse旁邊就是你的HTML文件的屏幕截圖。

如果這不起作用，請嘗試使用絕對路徑並嘗試包括file://。更好的方法是調出本地http服務器，並將您的html和圖像文件放在那裏。

來源

2016-03-15 02:19:59 austin665

我understaing您的網站的文件夾結構如下：

/Roundhouse{root-folder} 
    /Images 
    /CSS 
    index.html

如果index.html或任何根HTML文件所在，因爲我認爲這將是，那麼你應該刪除多餘的「圓屋/ 「來自你所有路徑的子路徑。因爲從目標HTML文件（index.html）的內部開始，應該開始訪問相對於其位置的文件。

因此，例如，根據上述結構，如果你有圖片文件夾內back.png圖像，可以顯示它如下：

<img src="Images/back.png">

希望這會有所幫助。嘗試閱讀更多關於HTML/CSS文件遍歷：

http://www.itechflare.com/main/html-css-file-path-quick-tips/

感謝

來源

2016-03-15 02:23:08 aelbuni

感謝您的迴應我只是困惑，爲什麼它在Dreamweaver和Brackets預覽中工作，但不直接從文件預覽時。有任何想法嗎？ – KaylaKett13

我是Notepad ++的忠實粉絲，所以真的不知道。然而，我最好的猜測是，Dreamweaver作爲一個IDE可能有額外的元數據，使其能夠智能地計算出錯誤類型的路徑。 – aelbuni

從文件預覽時沒有顯示圖像

回答

相關問題