HTML图片不显示主因是src未解析为有效地址或file://协议限制，需用Network面板确认请求是否发出、检查路径基准、禁用反斜杠、启用本地HTTP服务，并核对大小写与文件存在性。
HTML在线运行不显示图片，**几乎全是路径解析失败或运行环境协议限制导致的，不是代码语法问题，也不是浏览器“禁用了图片”**。
图片请求根本没发出去，src 是空、未渲染或非法标签
常见现象：Network 面板里压根看不到任何 .jpg 或 .png 请求，控制台也无报错。
-
src值为空字符串：<img src="">会尝试加载当前 HTML 页面本身，造成意外重载或 404 - 模板变量未替换：比如
src="{{avatar}}"在纯 HTML 环境下不会执行 JS 渲染，结果就是字面量{{avatar}}，浏览器当无效路径处理 - 写成了
<image>：这是 SVG 标签，不是 HTML 图片标签；必须用<img>，且不能闭合为</img> - 漏了
alt属性：虽不影响加载，但某些严格模式或辅助技术环境可能跳过渲染——务必写上，哪怕只是alt=""
路径写错：相对路径基准永远是 HTML 文件位置，不是你“以为的”位置
最典型翻车点：你在 VS Code 里把 index.html 拖进浏览器预览，看到图片正常；但一换环境（比如部署、或另开一个子页面），就全挂了。
-
src="images/logo.png"→ 表示“和当前 HTML 文件同目录下有个images/文件夹” -
src="../assets/logo.png"→ 表示“先上一级目录，再进assets/”，只在 HTML 文件不在项目根时才需要 -
src="/assets/logo.png"→ 表示“从网站根目录开始找”，仅在 HTTP 服务（如http://localhost:8000/）下有效；双击打开file:///xxx/index.html时，/指向磁盘根（如C:/），必然 404 - Windows 用户常写
src="images\logo.png"→ 浏览器不认反斜杠，必须全用/
双击打开 HTML 走 file:// 协议，浏览器直接拦截资源加载
这不是 bug，是安全策略。Chrome、Edge、Firefox 均默认阻止 file:// 下跨目录读取、含空格/中文路径、甚至部分同目录资源。
立即学习“前端免费学习笔记（深入）”；
- 控制台出现
Not allowed to load local resource或net::ERR_FILE_NOT_FOUND→ 必须起本地 HTTP 服务 - Python 用户：终端进项目根目录，运行
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js 用户：运行
npx http-server或npx serve -s - VS Code 用户：装 Live Server 插件，右键 HTML →
Open with Live Server - 路径中含中文或空格（如
src="产品图/封面.jpg"）→ 即使起服务也可能因编码异常失败，应改名
Network 面板看到请求但图片仍不显示，重点查状态码和响应头
别只看 HTML 代码，要确认浏览器到底收到了什么。
- 状态码
404：路径错、文件不存在、大小写不符（Linux 服务器区分Logo.png和logo.png） - 状态码
403：服务器拒绝访问，常见于图片放在/src、/node_modules这类被默认禁止访问的目录 - 状态码
200但图空白：点开该请求 → 看Preview标签是否真能渲染；若不能，检查Response Headers中Content-Type是否为image/png等正确类型，而非text/plain - 用了
crossorigin="anonymous"但目标服务器没返回Access-Control-Allow-Origin→ 图片加载静默失败，需去掉该属性临时验证
真正卡住人的地方，往往不是“怎么写”，而是“没意识到浏览器根本没发请求”或者“误把 file:// 当成正常开发环境”。Network 面板里一眼看不到图片请求，比看到 404 更值得警觉。
