时间戳

首页 > 解决方案 > html 文件中缺少图像

html - html 文件中缺少图像

问题描述

以下 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 文件时，很少有图像丢失。我检查了图片的路径，它看起来不错（注意 - 所有图片都存在于文件夹中）。关于可能出了什么问题的任何想法？

标签： htmlcssvisual-studio-codewebpage

解决方案

少了几张图片

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

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

OT：alt属性对于<img>元素是必需的。它应该alt=""用于装饰图像和alt="something meaningful"带有信息的图像（有关更多信息，请参阅WAI 教程）

推荐阅读