onerror必须写成this.src='fallback'; this.onerror=null以防无限循环，仅响应真实网络失败，不触发于空src、cors阻塞或200兜底页；推荐base64占位图并提前绑定事件。
图片显示异常不能靠“试试看”来兜底，必须分层控制：onerror 处理网络失败、<picture></picture> 保证格式兼容、src 始终指向可用资源，三者缺一不可。
onerror 属性为什么总不触发或导致页面卡死
最常见原因是备用图路径也 404，触发无限循环——浏览器加载 fallback.png 失败后再次进入 onerror，内存暴涨甚至标签页无响应。
- 必须写成
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"，this.onerror=null是硬性要求，不是可选项 - 推荐用内联 SVG 占位图：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，彻底规避路径风险 - 动态插入的
<img>元素，onerror必须在appendChild()前绑定，否则首次错误已发生，事件直接丢失 -
onerror不响应空src、CORS 阻塞、服务器返回 200 的兜底页等场景——它只管“请求发出后失败”
中的 ![]()
不是可选，而是强制兜底载体
<picture></picture> 不会自动把所有 <source></source> 加载失败的情况“降级”到 <img>；如果 <img src> 本身也 404，最终只显示 alt 文本，页面留白。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<img>的src必须指向一个高可用地址（如 CDN 托管的占位图），不能是相对路径拼错的./missing.jpg或空值 - 服务端渲染时，应确保首屏
<img>的src是真实可访问的 URL，而非依赖 JS 后续注入 - 若需进一步增强鲁棒性，可在 JS 中监听
<img>的error事件，再手动切换为 base64 占位图
断网或 JS 加载失败时，懒加载逻辑直接失效
只加 loading="lazy" 没用——浏览器不支持时它当不存在，而此时 src 若是占位图或为空，图片就白屏了。
- 必须同时维护两套状态：
src指向低质量但可用的资源（如 1px GIF 或 LQIP），data-src存高清图地址且静态存在于 HTML 中 - IntersectionObserver 初始化代码要内联进
<script></script>，避免外部 JS 加载失败导致整个懒加载逻辑消失 - 关键图片（如商品主图、头图）应跳过懒加载：直接写死
src，不设loading="lazy"，也不加data-src - 慎用
display: none包裹图片容器——Safari 和多数 Android WebView 会直接跳过该元素，即使后来显示出来也不会触发加载
本地开发时 file:// 协议下 90% 的“失败”其实是浏览器拦截
双击打开 HTML 文件时，所有以 / 开头的路径会被解析成系统根目录（如 file:///style.css），而不是项目根目录。这不是代码问题，是协议限制。
- 本地开发一律用
./开头的相对路径，例如src="./images/logo.png" - Linux 服务器严格区分大小写：
IMG.JPG≠img.jpg，路径必须完全一致 - 跨域图片若需 JS 安全操作（如 canvas 绘制），必须加
crossorigin属性：<img src="https://cdn.example.com/a.jpg?x-oss-process=image/resize,p_40" crossorigin>，且服务端需返回Access-Control-Allow-Origin响应头
真正难处理的不是“怎么换图”，而是“什么时候根本没机会换”——比如 src 为空、onerror 被 CORS 静默绕过、或 file:// 下连请求都没发出去。这些点一旦漏掉，所有降级逻辑都形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
