商品图片降级需分层控制：格式降级靠<source type>顺序，路径失效靠<img src>可用性，JS失效靠HTML原生兜底；三者缺一不可，且所有图片URL必须静态、可直访、路径统一。
商品图片降级展示不能只靠 <picture> 或 onerror 单点补救，必须分层控制：格式降级靠 <source type> 顺序，路径失效靠 <img src> 可用性，JS 失效靠 HTML 原生兜底，三者缺一不可。
用 <picture> 实现 WebP/AVIF 格式降级
直接写 <img src="product.webp"> 在 Safari≤13.1、IE、旧版 Android WebView 中会白屏——浏览器根本不识别 image/webp MIME 类型，连请求都不会发。
-
<source>的type必须严格匹配标准值：image/avif、image/webp、image/jpeg（不是image/jpg）、image/png - 顺序即优先级：把
<source type="image/avif">放最前，<source type="image/webp">次之，<img src="product.jpg">必须存在且指向静态可直访地址（不能带?format=webp或 CDN 动态参数） - 所有格式图片的宽高、构图、裁剪比例必须一致，否则切换时视觉跳变
保证 <img> 的 src 是真实可用的兜底图
<picture> 不是“多选一”，而是“按序加载，成功即停”。如果所有 <source> 都因 404、跨域或网络中断失败，浏览器仍会尝试渲染 <img>；但若它的 src 也无效，最终只显示 alt 文本，而非你预期的备用图。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐做法：把
<img src>指向一个高可用默认图，例如 CDN 托管的占位图或业务主图缩略图，路径必须能在浏览器地址栏单独打开并显示正常 - 避免写
<img src="broken.jpg">然后靠onerror修复——多次触发可能重复请求，且不兼容srcset/sizes场景 - 关键商品主图建议跳过
<picture>，直接用<img src="main.jpg">，确保首屏确定性
JS 失效或断网时的 HTML 原生兜底
<noscript> 不是懒加载或图片降级的解决方案。它只在 JS 被全局禁用时生效，而现代 SPA 页面初始 HTML 为空，<noscript> 根本没机会渲染。
立即学习“前端免费学习笔记（深入）”；
- 真正健壮的降级起点是 HTML 本身：商品图必须有可用
src，不能全靠 JS 注入data-src后再赋值 - 服务端渲染（SSR/SSG）需确保首屏图片的
src是真实可访问地址，否则断网时直接空白 - 监听
error事件做主动 fallback 是补充手段，但不能替代可用的<img src>——例如全局加：document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => e.target.src = '/assets/placeholder.svg'))
最容易被忽略的点是：所有降级逻辑都建立在图片 URL 路径有效的基础上。混用 ./images/ 和 images/、依赖构建时重写规则、或把 <img src> 写成相对路径却未以 HTML 文件所在目录为基准，在嵌套路由或离线环境下必然 404。路径必须统一、静态、可直访。
