VSCode开发HTML/CSS项目时所有图片及背景图都不显示如何解决

问题关联代码 #

CSS代码 #

body {
    margin-top: 0px;
    padding-top: 0px;
    background-image: url("avengers_bg.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#eternals_pic {
    float: left;
}

#hawkeye_pic {
    float: left;
}

#spiderman_pic {
    float: left;
}

#strange_pic {
    float: left;
}

HTML代码 #

<!-- Sample Source Code -->
<!DOCTYPE html>
<html>
  <body>
    <a>
      <img id="eternals_pic" src="eternals.png" width="400px" alt="The Eternals" title="The Eternals">
    </a>
    <a>
      <img id="hawkeye_pic" src="hawkeye.jpeg" width="400px" alt="Hawkeye" title="Hawkeye">
    </a>
    <a>
      <img id="spiderman_pic" src="spiderman_nwh.jpeg" width="400px" alt="Spiderman NWH" title="Spiderman NWH">
    </a>
    <a>
      <img id="strange_pic" src="strange2.jpeg" alt="Dr.Strange 2" title="Dr.Strange 2" >
    </a>
  </body>
</html> 

排查步骤 #

• 路径校验
  所有图片用的都是相对路径，必须保证avengers_bg.png、eternals.png、hawkeye.jpeg、spiderman_nwh.jpeg、strange2.jpeg这几个文件，和当前运行的HTML文件存放在同一个文件夹下。如果图片存放在单独的子文件夹（比如命名为img的文件夹），需要把路径修改为对应层级，例如存放在img文件夹下的话，图片引用要写成src="img/eternals.png"，CSS背景图路径要写成url("img/avengers_bg.png")。
  如果CSS是写在独立的.css文件中，路径是相对于CSS文件的存储位置，不是HTML文件。比如CSS放在css文件夹，图片放在和css同级的img文件夹，背景图路径要修改为url("../img/avengers_bg.png")，../代表返回上一级目录。
• 文件名与后缀校验
  系统默认会隐藏已知文件后缀，很容易出现实际文件名和代码中书写不一致的问题：比如实际文件是hawkeye.jpg，代码中写成了hawkeye.jpeg；或者文件名大小写不匹配，比如实际是Eternals.png，代码写的是eternals.png。可以在VSCode左侧资源管理器中直接查看所有图片的完整文件名，确保和代码中的书写完全一致。
• 图片文件完整性校验
  直接在本地文件夹中双击打开所有用到的图片，确认可以正常预览，排除图片本身损坏的问题。
• 控制台报错定位
  用浏览器打开HTML文件后，按F12打开开发者工具，切换到「控制台」标签，查看是否有404类报错，报错信息会明确告诉你哪个文件加载失败、实际请求的路径是什么，对照报错信息调整对应路径即可。

内容的提问来源于stack exchange，提问作者Zakaria Ayadi