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 事件手动替换。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• alt 不是摆设：它会在图片加载失败、被禁用或读屏时显示，务必写有意义的描述，比如 alt="公司Logo，蓝色渐变字母T"，而不是 alt="logo"
• JS fallback 示例：

  <img src="logo.png" onerror="this.src='fallback.png'; this.alt='备用Logo'">

  注意：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/ 里

路径问题从来不是“写对就行”，而是“在目标环境下，被谁解析、按什么规则解析、解析结果指向哪”。多看 Network 请求的实际 URL，比反复改 src 更快定位。