HTML图片加载问题需按场景拆解：路径错误占90%，应使用绝对路径；懒加载失效常见于动态渲染或CSS干扰；WebP/AVIF需用<picture>配兜底<img>；onerror仅捕获网络错误，须防死循环。
HTML图片加载问题不是“会不会加载”，而是“什么时候加载、加载哪张、失败了怎么办”——路径错、格式不兼容、懒加载误用、CORS拦住、甚至双击打开就失败，都得按场景拆解处理。
为什么图片一刷新就404或空白
90% 是路径写错了，但浏览器不会直接告诉你错在哪。相对路径受 HTML 文件位置影响极大，比如在 /pages/detail.html 里写 src="img/logo.png"，实际请求的是 /pages/img/logo.png，而不是你放在根目录下的 /img/logo.png。
- 一律改用以
/开头的绝对路径，如src="/img/logo.png" - 打开浏览器 DevTools 的 Network 面板，点开红色的图片请求，看
Request URL到底发去了哪，再比对真实文件位置 - 避免
../嵌套，尤其项目加了路由或构建后路径层级变深时，极易失效 - 本地双击打开 HTML 文件（
file://协议）时，浏览器会直接拦截图片请求，必须起本地服务：用 VS Code 的 Live Server 插件，或命令行运行python -m http.server 8000
loading="lazy"写了却没效果
这个属性只对「初始 HTML 中已存在 + 不在首屏视口内」的 <img> 生效。动态渲染（React/Vue 渲染）、父容器加了 overflow: hidden 或 transform、用了 position: absolute; top: -9999px 占位，都会让它静默失效。
-
<picture>里的<source>不支持loading属性，只有末尾的<img>标签才认 - 如果用了
srcset，必须配sizes，否则浏览器无法判断这张图占多宽，可能在手机上也下一张 2000w 的图 - 首屏关键图（banner、logo）绝不能加
loading="lazy"，否则 Chrome 可能延迟加载甚至跳过，导致白屏 1–2 秒 - 要精细控制，比如提前 200px 加载或加淡入动画，得用
IntersectionObserver手动实现，但回调里只做el.src = el.dataset.src和unobserve，别塞 DOM 操作或 AJAX
现代格式（WebP/AVIF）在 Safari 或旧版浏览器中不显示
<picture> 不是万能 fallback，Safari 13 以下、IE 完全忽略 type 属性，如果没写兜底 <img>，页面就是空白。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<picture>必须以一个<img>结尾，它是所有浏览器的最终 fallback，不能省 - 不要只信
type="image/webp"，Safari 早期版本识别不稳定；可加media="(min-width: 1px)"强制触发<source> - 确保 WebP/AVIF 图片本身已压缩，同等质量下体积比 JPEG 小 40%–70%，否则换格式没意义
- 用
sharp（Node.js）或 squoosh.app 批量转格式，别手动右键另存为
onerror 处理失败图时反复触发或根本进不去
onerror 只响应网络层失败（404/403/500），对空 src、CORS 拦截、MIME 错误、服务器返回 200 状态码的占位图，它完全沉默。
- 防死循环写法：
onerror="if (!this.src.includes('fallback')) { this.src = 'fallback.png'; this.onerror = null; }" - 动态创建的
<img>元素，必须在插入 DOM 前绑定onerror，否则来不及 - 更可靠的方式是全局监听：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/png;base64,iVBORw0KGgo...'; } }, true) - 注意：
onerror对 CSSbackground-image无效，内容型图片必须用<img>标签
最常被忽略的一点：首屏图片必须直出 src，不能靠 JS 插入；fetchpriority="high"（Chrome 109+）只对原生 <img> 有效，对背景图、object-fit 包裹的图、或 SSR 后客户端再 hydrate 的图都不起作用。
