img标签src路径错误导致空白且控制台无报错是最常见的静默失败，原因包括拼写错误、大小写不一致、相对路径位置误判；本地file://协议下绝对路径无效，应优先用VS Code拖拽生成的相对路径，生产环境配合服务器配置使用以/开头的绝对路径。
img 标签 src 路径写错，浏览器显示空白但控制台没报错
这是最常被忽略的“静默失败”：路径拼错、大小写不一致、或用了相对路径却没考虑当前 html 文件位置。浏览器不会报 404 错误（尤其本地双击打开时），只留一个空框。
- 用浏览器开发者工具 → Network 标签页，筛选
img，看请求是否返回200；如果状态是failed或(blocked)，基本是路径或跨域问题 - 本地开发时，双击打开 HTML 文件（
file://协议）下，src不能用绝对路径如/images/logo.png—— 它会从磁盘根目录找，不是项目根目录 - 推荐统一用相对路径，比如 HTML 和图片同在
./pages/和./assets/下，就写src="../assets/logo.png"；用 VS Code 打开整个文件夹，拖拽图片到 HTML 中会自动生成正确相对路径
HTML 中 img 的 src 是相对路径还是绝对路径？怎么选
没有“应该用哪个”，只有“在哪种部署场景下更稳”。相对路径对本地调试友好，但一旦 HTML 被移动或通过不同路由访问（比如 Vue Router 的 history 模式），路径就容易断；绝对路径（以 / 开头）依赖服务器根目录结构，上线后必须确保静态资源部署在对应位置。
- 开发阶段：优先用相对路径，配合 VS Code 的路径自动补全，避免手敲出错
- 生产环境且使用 Nginx/Apache：用以
/开头的绝对路径，例如src="/static/logo.png"，并确保 Web 服务器把/static/映射到磁盘上的真实目录 - 避免混用：不要在同一个项目里一部分用
./img/，一部分用/assets/，构建工具（如 Vite、Webpack）通常只接管一种路径解析逻辑
img 加载失败时怎么 fallback 到文字或备用图
onerror 属性可以捕获加载失败，但它只在 DOM 渲染阶段触发一次，且无法阻止默认的破损图标显示。更可靠的方式是用 CSS 配合 alt，或用 JS 监听 error 事件手动替换。
-
alt不是摆设：它会在图片加载失败、被禁用或读屏时显示，务必写有意义的描述，比如alt="公司Logo，蓝色渐变字母T"，而不是alt="logo" - JS fallback 示例：
@@##@@
注意：this.src改写后不会再触发第二次onerror，所以只写一次 - 慎用
loading="lazy"：它会让图片在滚动到视口前才开始加载，若网络极慢或图片本身小而关键（如按钮图标），反而导致用户看到空白再闪现，建议仅对长页面中的非首屏大图启用
为什么本地能打开，一上传到服务器就 404？
根本原因几乎全是路径和服务器配置不匹配。常见于 GitHub Pages、Vercel 静态托管，或自己搭的 Nginx，它们对 URL 解析规则和本地 file:// 完全不同。
- 检查服务器实际响应：直接在浏览器地址栏输入图片完整 URL（比如
https://yoursite.com/images/logo.png），看是否返回图片或404 Not Found - GitHub Pages 默认以仓库名为子路径（除非是
username.github.io），所以src="/img/logo.png"会去找根域名下的/img/，但实际资源在/repo-name/img/—— 应改用相对路径或配置base标签 - Vercel / Netlify 等平台默认把
dist/或build/当作根目录，确保你的图片确实打包进该目录，而不是还留在src/assets/里
src 更快定位。
