如何用CSS在网站显示图片？代码排查求助

1. 先核对文件路径与结构 #

• 确保代码里的图片路径和实际文件结构完全匹配：
  • 若HTML文件在项目根目录，图片放在images/文件夹，HTML标签应写：<img src="images/xxx.jpg" alt="图片描述">
  • 若CSS文件在css/子文件夹，背景图路径要回退到上一级：background-image: url('../images/xxx.jpg');
• 注意大小写：本地Windows系统不区分，但部署后服务器会严格区分，比如Images/和images/是两个不同路径
• 检查文件名拼写：避免把.jpg写成.jgp这类低级错误

2. 贴出你的代码片段（方便精准排查） #

把涉及图片的HTML和CSS代码贴出来，比如：

<!-- 正确示例 -->
<img src="images/head-img.jpg" alt="头部图片">

<!-- 错误示例：多了根路径斜杠，本地运行会找不到 -->
<img src="/images/head-img.jpg" alt="头部图片">

/* 正确示例：CSS在css文件夹时的路径写法 */
.hero-section {
  background-image: url('../images/banner-bg.jpg');
  background-size: cover;
}

/* 错误示例：路径未回退，会去css/images/找文件 */
.hero-section {
  background-image: url('images/banner-bg.jpg');
}

3. 本地调试技巧 #

• 用VS Code的Live Server插件打开页面，不要直接双击HTML文件（后者的路径解析逻辑和服务器不一致）
• 右键浏览器里的空白图片选“检查”，看控制台报错：
  • 显示404 Not Found → 百分百是路径错误
  • 其他报错信息可针对性处理

4. 确认标准项目结构 #

你的项目应该是类似这样的层级：

项目根目录/
├── index.html
├── css/
│   └── style.css
└── images/
    ├── pic1.jpg
    └── pic2.jpg

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