layui弹窗图片加载失败时需分场景兜底：方案一适用于type:1直接加载，用onerror+base64 svg备用图；方案二针对type:2 iframe，双层监听iframe与内部img；方案三采用服务端head预检+前端onerror双重保障。
当Layui弹窗中通过iframe或直接content加载图片时，若图片URL失效、网络中断或跨域拦截，弹窗会静默显示空白或报错白屏，用户无法得知发生了什么，也无重试入口。
方案一：弹窗内直接显示图片（type:1）时的onerror兜底
适用于图片路径可控、非跨域、且需完全自定义样式与交互的场景。此方式能精准捕获单张图片加载失败，并立即替换为友好提示或备用图。
第一步：在layer.open的content中写入带id和onerror的img标签，src设为真实地址，同时加loading="lazy"防阻塞：
<img id="popup-img" src="/api/file?img=abc123.jpg" loading="lazy" alt="加载中...">
第二步：在success回调中绑定一次性error处理——必须用one而非on，否则备用图再失败会触发无限循环：
success: function(layero, index) {<br> $('#popup-img').one('error', function() {<br> $(this).attr('src', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRleHQgeD0iNSIgeT0iMjAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgZmlsbD0iI2ZmZiI+44CK44O8PC90ZXh0Pjwvc3ZnPg==');<br> $(this).after('<p style="text-align:center;color:#999;margin-top:8px;font-size:12px;">图片无法显示</p>');<br> });<br>}
第三步：为防止备用SVG图也加载失败（极小概率），不设其onerror——【SVG Base64是内联资源，永不失败】，彻底切断错误链。
方案二：iframe弹窗（type:2）中图片加载失败的双保险监听
适用于图片位于独立页面（如/view/image.html?id=xxx）、需保持路由隔离或含复杂交互的场景。此时失败可能发生在iframe本身，也可能在iframe内部的img上。
方法一：监听iframe自身加载失败（基础保障）
在layer.open的success回调中，先清空src再赋值，确保onerror可触发：
const iframe = layero.find('iframe')[0];<br>iframe.src = 'about:blank';<br>iframe.onerror = () => {<br> layer.msg('页面加载失败，请检查链接或网络', { icon: 2 });<br> layer.close(index);<br>iframe.src = '/view/image.html?id=' + id; // 此刻才发起真实请求
方法二：在iframe子页内主动上报图片状态（增强保障，需你控制子页代码）
子页HTML末尾加入检测逻辑：等待图片加载完成或超时后，向父页发送postMessage：
<script><br>const img = document.getElementById('main-img');<br>let loaded = false;<br>img.onload = () => { loaded = true; window.parent.postMessage({ type: 'img-ready' }, '*'); };<br>img.onerror = () => { window.parent.postMessage({ type: 'img-error' }, '*'); };<br>setTimeout(() => { if (!loaded) window.parent.postMessage({ type: 'img-timeout' }, '*'); }, 5000);<br></script>
父页在layer.open外提前监听message，匹配index关闭或提示：
window.addEventListener('message', e => {<br> if (e.data.type === 'img-error' || e.data.type === 'img-timeout') {<br> const index = parent.layer.getFrameIndex(window.name);<br> if (index > 0) {<br> layer.msg('图片加载异常', { icon: 2 });<br> layer.close(index);<br> }<br> }<br>});
方案三：服务端预检 + 前端懒加载组合策略
当图片源不可控（如第三方CDN、用户上传直链）、且不允许修改子页代码时，必须把校验前置到弹窗打开之前。
1. 点击预览按钮时，先发起轻量HEAD请求校验图片URL有效性：
function openImagePopup(url) {<br> fetch('/api/health-check?url=' + encodeURIComponent(url), { method: 'HEAD' })<br> .then(res => {<br> if (res.ok) {<br> layer.open({ type: 1, content: '@@##@@' });<br> } else {<br> layer.msg('图片不可用，请联系管理员', { icon: 2 });<br> }<br> })<br> .catch(() => layer.msg('网络异常，无法验证图片', { icon: 2 }));<br>}
2. 后端/api/health-check接口需支持HEAD，并透传目标URL的状态码；对3xx重定向要跟随，对403/404/500等返回失败标记。
3. 若校验通过但实际加载仍失败（罕见，多因瞬时网络抖动），保留方案一中的img onerror作为最后一道防线——【两次校验叠加，覆盖99.9%失败场景】。
