从文件预览时图像不显示

Question

嗨，我是一名新手程序员，并且正在制作我的第一个网站。 我在Mac上工作，每当我直接从finder中预览文件时，即使路径正确，我的CSS和图像也不会显示。 当我在Dreamweaver CS6和Brackets中预览文件时，景象看起来确实像我想要的样子，但是当我选择直接从文件中预览时，却没有。 这是CSS和HTML文件。 任何建议将不胜感激。 谢谢。这是这里发生的事情的截图

@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>

Answer 1

如果文件夹RoundHouse在您的html文件旁边，请检查路径是否正确。

如果这不起作用，请尝试使用绝对路径并尝试file:// 。 更好的方法是调出本地http服务器并将html和图像文件放在那里。

Answer 2

我理解您的站点文件夹结构如下：

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

如果index.html或我认为将在其中的任何根HTML文件都位于，那么您应该从所有路径中删除多余的“ Roundhouse /”子路径。 因为从目标HTML文件（index.html）内部开始，您应该开始相对于其位置访问文件。

因此，例如，根据上述结构，如果您在Images文件夹中有back.png图像，则可以显示如下：

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

希望这会有所帮助。 尝试阅读有关HTML / CSS文件遍历的更多信息：

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

谢谢

从文件预览时图像不显示

问题描述

2 个解决方案

解决方案1
0 2016-03-15 02:19:59

解决方案2
0 2016-03-15 02:23:08

从文件预览时图像不显示

问题描述

2 个解决方案

解决方案1 0 2016-03-15 02:19:59

解决方案2 0 2016-03-15 02:23:08

解决方案1
0 2016-03-15 02:19:59

解决方案2
0 2016-03-15 02:23:08