可靠图片降级需「多层 fallback 路径 + 状态隔离 + 渲染前校验」三者缺一不可：onerror 仅响应网络请求失败，对空 src、cors 拦截、200 占位图等静默；loading="lazy" 不支持时不会读取 data-src，src 必须指向可用资源；picture/webp 降级须显式声明标准 mime 类型并设强制兜底 img。
容错处理不是加个 onerror 就完事，而是让图片在路径错、CORS 拦截、200 占位图、空 src、<picture></picture> 解析失败等所有常见异常下，仍能稳定呈现可用内容。
确保 src 永远指向一个真实可加载的静态资源
80% 的“白屏”问题源于 src 本身不可用：比如写成 src=""、src="broken.jpg"（文件实际不存在）、或动态地址如 src="/api/image?uid=123"。浏览器不会因为请求失败就自动切到 data-src 或 <source></source>，它只管发一次请求，失败就停住。
- 必须用 CDN 托管的占位图，例如
src="/img/placeholder.svg"或src="/i/1x1.gif"（1×1 透明 GIF，确保返回 HTTP 200） - 绝对禁止
src="#"、src="javascript:void(0)"、相对路径未对齐基准目录（如 HTML 在/post/下却写src="images/a.jpg"） - SSR 渲染时，
src值必须由服务端直接写出，不能依赖客户端 JS 注入——断网时连占位图都出不来
<picture></picture> 结构必须合规，且兜底 <img> 独立可访问
IE11 及旧 WebView 会直接忽略整个 <picture></picture> 标签，只渲染其内部最后一个 <img> 元素。如果这个 <img> 的 src 不可用，整块就空白。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<img>是<picture></picture>的必需子元素，不能省略；它的src必须是静态、无查询参数、能直接在浏览器地址栏打开的 JPEG/PNG 地址 -
<source></source>必须按支持强度从强到弱排列：type="image/avif"→type="image/webp"→ 最后才是<img>，否则 Safari 会跳过全部 - 所有格式图片（AVIF/WebP/JPEG）必须像素级宽高一致，否则切换时因 intrinsic 尺寸不同引发 layout shift
onerror 必须内联 + 立即切断事件链
onerror 只响应“请求发出后失败”，对空 src、CORS 拦截、服务器返回 200 占位图等情况完全静默。且动态绑定（如 img.addEventListener('error', ...)）在 Safari 和旧 Edge 中大概率不触发。
- 唯一可靠写法：
onerror="this.src='/img/fallback.png'; this.onerror=null" - 更稳妥写法：
onerror="if (!this.src.includes('fallback')) this.src='/img/fallback.png'; this.onerror=null" - 若连 fallback 图都不可信，直接用内联 base64：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=='"; this.onerror=null"
降级失效最常被忽略的一点：alt 不是备用文案，而是强制语义要求
alt 缺失会导致验证失败、无障碍中断、SEO 损伤，且在 src 无效时根本不会显示——浏览器只有在真正发起图片加载后才考虑渲染 alt 文本。
-
<img>的alt必须显式声明，不能留空（除非是纯装饰图，此时用alt=""） - 在
<picture></picture>中，alt只属于那个兜底的<img>，<source></source>里写的任何属性都不影响它 - 空状态图的
alt要带操作提示，例如alt="暂无数据，点击刷新重试"，而不是alt="empty-state"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
