图片不显示主因是路径错误：相对路径需以HTML文件为基准，绝对路径以网站根目录为基准；禁用反斜杠；file://协议下中文/空格路径会失效，应启HTTP服务调试；用开发者工具Network面板验证请求状态，并用JavaScript打印实际URL定位问题。
图片路径写错：相对路径 vs 绝对路径混淆
HTML 中 <img> 标签的 src 属性路径错误，是最常见的图片不显示原因。浏览器按当前 HTML 文件位置解析相对路径，不是按编辑器打开位置或浏览器地址栏路径。
- 如果 HTML 文件在
/project/index.html，而图片在/project/images/logo.png，应写src="images/logo.png"（不是src="/images/logo.png"） -
src="/images/logo.png"表示从网站根目录找，仅在本地用 HTTP 服务（如python -m http.server）时才可能生效；直接双击打开文件会失败 - 避免使用 Windows 风格反斜杠：
src="images\logo.png"❌，必须用正斜杠src="images/logo.png"✅
浏览器直接双击打开 HTML：file:// 协议限制
用文件管理器双击打开 HTML，浏览器地址栏显示 file:///xxx/index.html，此时浏览器出于安全策略，会阻止部分跨目录访问和某些资源加载（尤其含空格或中文路径）。
- 图片路径中含中文或空格（如
src="产品图/封面.jpg"）会导致 404 —— 浏览器自动编码后路径失效 - 解决方法：启动本地 HTTP 服务，让页面运行在
http://localhost:8000下，路径解析更可靠 - 快速起服务命令：
python3 -m http.server 8000
（Python 3）或npx http-server
（需 Node.js）
检查图片是否真被加载：开发者工具 Network 面板
别只看 HTML 代码，要用浏览器开发者工具确认实际请求行为。右键 →「检查」→ 切到「Network」标签，刷新页面，筛选 Img 类型，观察图片请求状态。
- 看到
404：路径确实错了，点开该请求看「Initiator」列，确认是哪个<img src="...">发出的 - 看到
200但图片空白：可能是图片格式损坏、MIME 类型不匹配（如服务器返回text/plain），或 CSS 设置了display: none - 注意大小写：Linux/macOS 服务器区分
Logo.png和logo.png，Windows 本地不区分，但部署后易出问题
路径调试技巧：用 JavaScript 快速验证
临时加一段脚本，把拼接后的完整 URL 打印出来，比肉眼推算更可靠。
立即学习“前端免费学习笔记（深入）”；
<script>
const img = document.querySelector('img');
console.log('实际请求地址：', new URL(img.src, location).href);
</script>
这段代码会输出浏览器最终解析出的绝对地址，比如你写 src="../assets/icon.svg"，它会告诉你真实请求的是 file:///D:/myproj/assets/icon.svg 还是 http://localhost:8000/assets/icon.svg，一眼看出是否越级跳转或根路径误用。
路径问题本质是“HTML 文件在哪”和“浏览器怎么算路径”之间的错位，盯住 location.href 和 <img src> 的组合结果，比反复改路径更省时间。
