弹窗图片无js时需确保静态可访问：首图必须写死src且可直连，禁用data-src和background-image；picture降级需含兼容jpg的兜底img；onerror须内联并置空事件防止循环；尺寸不一致需统一像素宽高并用aspect-ratio固定比例。
弹窗图片没 JS 时怎么保证能显示
弹窗图片本质是「延迟呈现」的静态资源，降级核心不是让它“弹出来”，而是确保它在 JS 失效、网络中断或脚本阻塞时，仍能作为普通图片被浏览器加载和渲染。关键在于：不能把图片地址藏在 JS 变量里，也不能靠 data-src 动态注入——HTML 解析完就得有真实可访问的 src。
- 首张图（尤其是主视觉图）必须写死在 HTML 中：
<img src="popup-main.jpg" alt="活动主图">，且该 URL 要能直接在地址栏打开 - 如果弹窗内容由 JS 渲染（如 Vue/React 组件），SSR 或服务端模板阶段就要把这张图的
src静态输出，而不是等mounted后再setState - 避免用
background-image实现弹窗图：SEO 和无障碍失效，onerror不触发，loading="lazy"无效 - 禁用
display: none包裹整个弹窗容器——这会让 Safari 和多数 Android WebView 在 JS 未执行时彻底忽略内部图片，连预加载都不做
弹窗图片用 picture 降级时为什么还是空白
<picture></picture> 在弹窗中失效，90% 是因为结构写错或兜底缺失。浏览器不支持 <picture></picture>（如 IE11、微信旧版 WebView）时，会跳过所有 <source></source>，只渲染末尾的 <img>；如果这个 <img> 没写、src 错误、或被 CSS 隐藏，结果就是一片空白。
-
<img>必须存在，且必须放在所有<source></source>之后，src指向一张兼容性强的 JPG（别用 WebP） -
<source type="image/webp"></source>的srcset必须配sizes，否则现代浏览器也可能回退到<img>，比如写成sizes="100vw"就容易在桌面端加载大图 - 服务器返回 AVIF/WebP 时，
Content-Type必须严格匹配type值（image/avif，不是image/jpeg），否则 Chrome/Safari 直接跳过该<source></source>，不报错也不 fallback - 微信 iOS WebView 对
type属性支持极差，建议弹窗图只用 JPG +srcset，不用<picture></picture>
onerror 写在弹窗图片上为啥不生效
内联 onerror 在弹窗图片上常失效，不是语法错，而是触发条件被绕过了。它只对「网络请求失败且返回非 2xx 状态」有效；对空 src、CORS 拦截、404 返回 200 占位图、或 JS 动态设 src 失败等情况完全静默。
- 正确写法：
onerror="this.src='/img/placeholder.jpg'; this.onerror=null;"——this.onerror=null必须加，否则 404 后反复触发导致栈溢出 - 更稳妥写法：
onerror="if (!this.src.includes('placeholder')) this.src='/img/placeholder.jpg'; this.onerror=null;"，防 fallback 图也挂掉 - 不要用
addEventListener('error', ...)：Safari 和旧 Edge 中基本不触发，必须用内联 - 如果弹窗是 JS 动态创建的 DOM，
onerror必须在appendChild前就绑定，不能等插入后才加事件
弹窗图片尺寸不一致导致切换时跳变
弹窗图从 WebP 切到 JPG，或不同分辨率图之间切换时出现拉伸、缩放、布局抖动，根本原因是原始像素尺寸（intrinsic size）不一致。CMS 导出、CDN 转码、压缩工具常抹除 EXIF 宽高信息，让浏览器误判为“无尺寸”，退化成宽度撑满、高度塌陷。
- 用
file logo.webp命令或在线 EXIF 查看器确认：WebP 和 JPG 的像素宽高是否逐像素一致 - 生成 JPG 时强制写入宽高：
convert -resize 800x600\! input.png -define jpeg:size=800x600 output.jpg - 在 CSS 中用
aspect-ratio固定容器比例（现代浏览器），并配width: 100%; height: auto;，避免依赖图片自身尺寸 - 禁用
object-fit: cover单独使用：IE11 不支持，且无 polyfill 时会拉伸变形；如需裁切，优先用服务端生成固定尺寸图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
