无需登录 数据私有 本地保存

图片加载fallback生成 - onerror替换

16
0
0
0
图片Fallback配置
输入可能失效的URL来预览fallback效果
实际效果预览
图片加载中...
使用onerror自动替换
Fallback效果
Fallback预览
加载失败时显示的占位图
生成代码
HTML onerror
常见问题与知识点
什么是图片Fallback？

图片Fallback（容错/回退）是指当原始图片加载失败时，自动替换为备用图片或占位符。这是前端开发中的重要容错机制，确保页面在图片资源不可用时仍保持良好的用户体验。常见实现方式包括onerror事件、<picture>标签、CSS背景等。

为什么需要this.onerror=null？

在onerror处理函数中设置this.onerror=null是为了防止无限循环。如果fallback图片也加载失败，会再次触发onerror，导致无限递归。设置为null后，即使fallback失败也不会再次调用处理函数，浏览器将显示默认的破图图标。

SVG内联Fallback有什么优势？

SVG内联（Data URI）方案不依赖任何外部服务，完全离线可用。将SVG编码为base64后嵌入img标签，无需额外HTTP请求，加载速度极快。适合对可靠性要求高的场景，如离线应用、内网系统等。缺点是Data URI较长，但对于占位图来说完全可接受。

占位图服务推荐哪些？

主流占位图服务：placehold.co（稳定，支持HTTPS，自定义颜色文字）、via.placeholder.com（老牌服务）、picsum.photos（随机真实图片，适合需要视觉内容的场景）、dummyimage.com（老牌稳定）。建议优先使用placehold.co。

Picture标签如何实现Fallback？

<picture>标签支持多源fallback：浏览器按顺序尝试<source>，如果都不支持或加载失败，最终回退到<img>标签。结合onerror可以实现格式兼容+加载容错的双重保护，是最健壮的图片加载方案。

如何优化移动端的图片Fallback？

移动端优化要点：①使用响应式占位图尺寸（通过srcset或CSS控制）；②占位图体积要小（SVG内联是最佳选择）；③考虑弱网环境，设置合理的超时和重试机制；④使用CSSaspect-ratio保持占位区域比例，避免布局抖动；⑤懒加载图片时提前设置好fallback。

🔧 相关工具