从文件预览时没有显示图像

嗨，我是一个新手程序员，我正在制作我的第一个网站。我在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

从文件预览时没有显示图像

回答

相关问题