HTML中图片不显示主因是路径错误：相对路径以HTML文件为基准，写错如“../assets/logo.png”应改为根相对路径“/assets/logo.png”，并用Network面板验证请求URL。
HTML 中图片不显示，90% 是路径或加载机制误用导致的，不是图片本身坏了。
img src 里写相对路径为什么总报 404
相对路径是相对于当前 HTML 文件所在目录解析的，不是相对于 CSS 或 JS 文件，更不是相对于浏览器地址栏 URL。常见错误包括：
- 把
src="images/logo.png"写成src="./images/logo.png"—— 多余的./在多数浏览器下能容错，但部分构建工具（如 Vite）会严格校验并拒绝加载 - HTML 在
/pages/about.html，图片在/assets/logo.png，却写了src="../assets/logo.png"—— 实际应为src="/assets/logo.png"（以/开头才是根相对路径） - 开发时用本地双击打开
file://协议，此时相对路径受限于文件系统权限，很多浏览器直接禁用跨目录访问，../会静默失败
验证方法：右键图片占位框 → “检查元素”，看控制台 Network 标签页里实际请求的 URL 是什么，再比对文件真实位置。
object 标签加载图片基本不可行
<object> 不是 <img> 的替代品，它设计目标是嵌入插件或可执行内容（如 PDF、Flash），现代浏览器已移除图像插件支持。即使写成：
立即学习“前端免费学习笔记（深入）”；
<object data="photo.jpg" type="image/jpeg"></object>
也会出现：
- 空白区域 + 默认 300×150 占位框
- 控制台报
Failed to load resource（哪怕文件真实存在且 HTTP 状态码是 200） - Safari 可能唤起 QuickLook，但无法绑定事件、不能缩放、尺寸失控
唯一例外是 SVG：data 必须指向独立 .svg 文件，type 必须为 image/svg+xml，且服务器响应头必须含 Content-Type: image/svg+xml。其他格式一律绕开 <object>。
动态设置图片 src 的安全写法
不要用 src="javascript:func()" 这类内联伪协议——已被主流浏览器限制，且违反 CSP 策略。推荐方式：
- 先写空
<img id="avatar">，再用 JS 赋值：document.getElementById('avatar').src = '/uploads/' + userId + '.jpg'; - 用
data-属性存原始标识：<img data-user-id="123">，JS 中读取后拼接 URL，避免模板注入风险 - 若需异步加载（比如从 API 拿 URL），务必加
onload和onerror处理：img.onload = () => img.classList.add('loaded');，否则用户可能看到长时间空白
注意：服务端返回的图片 URL 必须是完整可访问路径，不要依赖前端二次拼接域名——CDN 切换或代理层变更时极易断裂。
VSCode 写 Markdown 时图片管理最容易忽略的点
Markdown 中的  路径逻辑和 HTML 完全一致，但 VSCode 预览默认不走 HTTP 服务，而是用 file:// 加载，导致：
- 路径写成
./assets/img.png→ 预览正常，但部署到 Nginx 后 404（因 Nginx 不识别./） - 截图随手丢桌面，插入后路径是
/Users/xxx/Desktop/snap.png→ 换电脑就失效 - Git 提交时漏掉图片文件，协作同事 clone 后一片红叉
真正有效的做法是：所有图片统一放进 docs/assets/ 目录，用插件（如 Markdown Image Helper）粘贴截图时自动保存并生成 ./assets/xxx.png；部署前确认该目录被包含在静态资源发布路径中。
