缺少html文件中的图像

Question

以下HTML代码：

<div class="main-container">
    <div id="top-section-main">
        <div id="top-section-content">
            <h1>Awesome looks so good</h1>
            <p>Awesome is the landing page you wish you had when you started</p>
            <p class="playBTN"><img src="Images/9.1 Play.png" height="120px" width="120px"></p>
            <div class="main-form">
               <form>
                   <h6>SIGN UP FOR A FREE 30 DAY TRIAL</h6>
                   <input type="text" name="name" placeholder="Name">
                   <input type="email" name="email" placeholder="Email">
                   <button style="trial" type="submit" value="submit">Start Free Trial</button>
               </form>
            </div>
        </div>
    </div>
</div>

它是相应的CSS：

#top-section-main{
background-image: url(/Images/6.1\ Friends.jpg);
height: 740px;
border: none;
}
#top-section-content{
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
#top-section-content h1{
font-size: 4em;
font-weight: 300;
color: #ffffff;
text-align: center;
margin: 0;
padding-top: 100px;
}
#top-section-content p{
font-size: 1.3em;
font-weight: 400;
color: #ffffff;
text-align: center;
margin-top: 10px;
}
.playBTN{
text-align: center;
margin: auto;
padding: 50px 0 100px 0;
}
.main-form h6{
font-family: sans-serif;
font-size: 0.9em;
font-weight: 100;
color: #ffffff;
text-align: center;
}
.main-form input{
width: 30%;
margin: 0;
height: 40px;
font-family: sans-serif;
font-size: 15px;
padding-left: 15px;
font-weight: 100;
border: none;
}
.main-form button{
width: 30%;
height: 42px;
font-family: sans-serif;
font-size: 15px;
padding-left: 15px;
font-weight: 100;
background-color: #6dc77a;
color: #ffffff;
border: none; 
}

这是我创建的静态网页的问题。当通过IDE本身（VScode）启动时，没有问题，并且正在显示每个图像。但是当我从文件夹中单独打开html文件时，很少有图像丢失。我已经检查了图片的路径，看起来很不错（注意 - 所有图像都存在于文件夹中）。什么可能出错了？

Answer 1

缺少一些图像

显示哪些以及缺少哪些？报告错误时请更具体。 相对于HTML页面的样式表在哪里？你的代码中没有<link>所以我们没有这些信息。

（我不知道VSCode与常规浏览器的区别）假设显示HTML代码中的img元素，您的背景图像应该看起来像background-image: url("/Images/6.1 Friends.jpg");。如果仍然不显示，请尝试删除尾部斜杠。 如果你的样式表与你的标记不在同一个目录中，那么你仍然可能有一个问题：那个尾随斜杠是你文件的根，这是一个已知位置的网络服务器（浏览器中的协议http(s)://）但是根您的操作系统文件系统的文件：/// protocol。 更一般的说明：当相对时，CSS资源的路径是相对于CSS的位置，而不是相对于HTML页面。

OT：alt属性是强制性的<img>属性。对于装饰图像应该是alt=""，对于带来信息的图像应该是alt="something meaningful"（有关更多信息，请参阅WAI tutorial）