90%图片插不进是src路径错误或混淆img与background-image：img的src相对HTML文件，CSS的url()相对CSS文件；注意协议、大小写、中文路径及MIME类型。
图片插不进去，90% 是 src 路径写错，或把 background-image 和 <img alt="HTML网页中插入图片的代码编辑教程" > 混用了——这两者语义、行为、路径基准点全都不一样。
用 ![HTML网页中插入图片的代码编辑教程]()
标签插入内容图片时，src 路径必须相对 HTML 文件
<img alt="HTML网页中插入图片的代码编辑教程" > 是内容元素，浏览器按 HTML 文件所在位置解析 src。写错路径不会报错，但 Network 面板里能看到 404。
- 图片和 HTML 在同一文件夹：
<img src="banner.jpg" alt="首页横幅"> - 图片在
images/子目录：<img src="images/icon.png" alt="图标">（别加./） - 图片在上一级目录：
<img src="../assets/logo.svg" alt="网站 Logo"> - 绝对路径慎用：
/images/bg.jpg在本地双击打开时会找 C:/images/，不是项目目录 - Windows 路径里的反斜杠
\必须换成正斜杠/，否则解析失败
用 CSS background-image 设置背景图时，路径相对 CSS 文件
如果你把样式写在 <style></style> 标签里（即内联 CSS），路径仍以 HTML 文件为基准；但写在外部 .css 文件中时，url() 的路径是相对于该 CSS 文件的位置，不是 HTML。
- HTML 和 CSS 同目录，图片在
images/下：background-image: url("images/bg.jpg"); - CSS 在
css/style.css，图片在images/bg.jpg：要写url("../images/bg.jpg") - 别用
file:///前缀——只对<img alt="HTML网页中插入图片的代码编辑教程" >的src有效，CSS 中无效且会被忽略 - 大小写敏感：Linux/macOS 下
BG.JPG≠bg.jpg，本地测试没问题不代表上线能显示
网络图片必须带完整协议，且注意混合内容拦截
外链图片不是“粘贴 URL 就完事”，src 值必须是完整可访问的地址，且协议需与当前页面一致。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<img src="https://cdn.example.com/photo.webp" alt="示例图"> - ❌ 错误：
<img src="photo.jpg" alt="HTML网页中插入图片的代码编辑教程" >（浏览器当本地路径处理） - ❌ 错误：
<img src="http://example.com/photo.jpg" alt="HTML网页中插入图片的代码编辑教程" >（HTTPS 页面加载 HTTP 资源 → Mixed Content 被屏蔽） - 控制台若出现
Blocked loading mixed active content，立刻检查协议是否统一 - alt 属性不能为空字符串以外的空白值；纯装饰图才用
alt=""，否则必须描述内容
图片不显示但没报错？优先查这三处
很多问题不出现在代码里，而出现在环境或配置细节中。
- 右键 → “检查” → 切到 Network 面板，刷新，看图片请求状态码是不是 200；404 就是路径错，0 就是跨域或协议问题
- 双击打开 HTML 时用的是
file://协议，某些服务器策略（如 CORS、Referer 限制）不生效，但图片防盗链可能仍起作用 - 图片文件名含中文或空格？部分旧浏览器或本地文件系统会解码失败，改用英文下划线命名更稳妥
-
<img alt="HTML网页中插入图片的代码编辑教程" >默认是行内元素，周围有空白间隙；用display: block或vertical-align: middle消除
最常被忽略的一点：路径对了、协议对了、文件也存在，但图片还是黑块或空白——十有八九是 MIME 类型错误或图片本身损坏，直接把图片拖进浏览器地址栏试试能否单独打开。能打开，再回来看 HTML；打不开，换图。
