相册图片降级必须首图写死html中带src和alt，确保无js时可见；其余图用data-src或js动态加载；按avif→webp→jpeg顺序排列，为强制兜底；js失败时显式回退首图，onerror需内联防死循环。
相册图片降级不是“加个 fallback 就完事”，而是必须让首图可立即渲染、其余图延迟加载不阻塞、JS 失效时仍能展示关键内容——否则用户打开页面第一眼就是空白或一堆叉号。
首图必须写死在 HTML 里带 src 和 alt
浏览器禁用 JS 或网络极慢时，轮播/相册逻辑根本不会执行。靠 JS 动态插入所有图片 = 用户永远看不到第一张。
- 把第一张图用标准
<img>写在相册容器最前面，src指向真实可用资源（如 CDN 托管的原图或压缩版），alt描述实际内容 - 后续图片只存
data-src或放在 JS 数组里，**不要生成带src的<img>标签** - 避免所有图片都写
src却靠 JS 切换 —— 那样没 JS 时会显示一排破碎图标
<picture></picture> 里每个 <source></source> 必须按 AVIF → WebP → JPEG 顺序排列
浏览器从上到下逐个尝试 <source></source>，遇到第一个 type 可解码且 media 满足的就加载并停止。顺序错，高阶格式永远不生效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<source type="image/avif" srcset="a.avif"></source>必须放最前 -
<source type="image/webp" srcset="a.webp"></source>居中 -
<img src="a.jpg" alt="...">是强制兜底，不能省略，且src必须是静态路径（不能带?format=webp等动态参数） - 服务器返回的
Content-Type必须与type完全一致：WebP 文件要配image/webp，AVIF 要配image/avif，否则静默跳过
JS 初始化失败时显式回退到首图并暴露 fallback 区域
相册库（如 Splide、Lightbox2）初始化失败时，常见表现是容器空、报错 Cannot read property 'slideNext' of undefined，但错误常被静默吞掉。
- 初始化前检查容器是否存在：
if (!document.querySelector('.gallery')) return - 用
try/catch包裹实例化，并在catch中显式显示首图区域：document.querySelector('.gallery-fallback').style.display = 'block' - 给相册容器加
data-initialized="false"，JS 成功后改为true；CSS 可据此控制 fallback 显示：[data-initialized="false"] .gallery-fallback { display: block; }
图片 404 时 onerror 必须内联且防死循环
onerror 不响应空 src、CORS 拦截、或服务器返回 200 占位图等场景，仅对请求发出后失败有效。且动态绑定在 Safari / 旧 Edge 中大概率不触发。
- 必须用内联写法：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;" - 更稳妥写法：
onerror="if (!this.src.includes('placeholder')) this.src='/assets/placeholder.svg'; this.onerror=null;" - 如果连 fallback 图也不可信，直接用 base64 内联 SVG：
onerror="this.src='data:image/svg+xml;base64,...'; this.onerror=null;" - 注意：
<img>的alt不会在src为空或非法协议时显示 —— 浏览器压根不发起加载，也就不会渲染alt
最容易被忽略的是：所有格式图片（AVIF/WebP/JPEG）必须尺寸一致、构图一致，否则响应式切换时视觉跳变；而更基础的问题是，路径一错，连首图都进不去 —— 相册降级的第一道防线，永远是 HTML 里那个写死的 <img src="...">。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
