必须显式声明降级链，按格式支持强度从高到低排列，末尾的src是强制兜底且必须可加载，否则整个结构退化为纯文本；旧版safari、ie等因不识别image/webp mime类型而直接跳过解析，不请求、不fallback、不留提示。
必须用 <picture></picture> 显式声明降级链，<source></source> 按格式支持强度从高到低排列，末尾 <img> 的 src 是强制兜底且必须可加载——否则整个结构退化为纯文本。
为什么只写 <img src="a.webp"> 会白屏
旧版 Safari（≤13.1）、IE、部分安卓 WebView 根本不识别 image/webp MIME 类型，连请求都不发，直接留白。这不是加载失败，是解析器跳过未知格式。浏览器不会自动 fallback 到 JPEG，也不会尝试解析文件后缀。
-
<source></source>必须带type属性，比如type="image/webp"，漏写或拼错（如image/wep）就静默失效 - 服务器返回的响应头
Content-Type必须和type值完全一致；Nginx 缺少types { image/webp webp; }配置，.webp 文件会被当成application/octet-stream，浏览器直接跳过 -
<img>的src不能是带查询参数的动态地址（如?format=webp），也不能是 404 路径；否则连兜底都进不去
<picture></picture> 中 <source></source> 的顺序和匹配逻辑
浏览器从上到下逐个检查 <source></source>，遇到第一个 media 条件满足且 type 被当前浏览器支持的，就加载它并停止匹配。这不是“建议顺序”，而是执行规则本身。
- AVIF 放最前：
<source type="image/avif" srcset="a.avif"></source> - WebP 居中：
<source type="image/webp" srcset="a.webp"></source> - JPEG/PNG 必须由
<img src="a.jpg">承担，不能写成第三个<source type="image/jpeg"></source>——否则 IE 和旧 WebView 会忽略全部<source></source>，又没<img>可渲染 -
media推荐用视口宽度判断，如(max-width: 768px)；少用min-resolution，Safari 和部分安卓 WebView 行为不一致
<img> 的 src 和 alt 怎么设才算真正兜底
<img> 不是“备用选项”，它是 <picture></picture> 结构里唯一被所有浏览器识别的子元素。它的 src 必须指向一个静态、高可用、HTTP 200 的资源，alt 必须显式声明且语义准确。
-
src推荐用 CDN 托管的占位图（如/img/placeholder.svg）或业务默认图（如/img/avatar-default.png），禁用src=""、src="#"、src="broken.jpg" -
alt不是“图片挂了才显示”，而是强制必需属性；空状态图要写清原因和操作提示，例如alt="暂无数据图表，点击刷新重试"，而非alt="空状态插图" - 内联 SVG 或
background-image替代方案无法承载alt，无障碍和 SEO 全失效
onerror 内联写法为什么必须加 this.onerror=null
动态绑定 img.onerror 在 Safari 和旧 Edge 中大概率不触发；document.addEventListener('error') 也捕获不到它（不冒泡）。唯一可靠的是 HTML 内联写法，但不加防护就会死循环：替换失败 → 再次触发 onerror → 再次替换……
- 正确写法：
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/png;base64,iVBORw0KGgo...'; this.onerror=null" -
onerror不响应空src、CORS 阻塞、服务器返回 200 占位图等场景——它只管“请求发出后失败”
最容易被忽略的不是语法写错，而是所有格式图片尺寸不一致、裁剪比例不同，导致响应式切换时视觉跳变；或者路径写成 ..images/logo.jpg（缺 /），本地双击能开，部署后 404 —— 降级链再完整，第一步就断在路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
