SuperAPI AI 工具集

broken-images

设计与创作

查看项目

更新于 10-16 05:42

技能介绍

用途:该规则用于在代码审查和图片资源检查中处理“失效图片”问题。失效图片会显示破损占位图标、破坏布局,并让站点显得缺乏维护;若失效图片恰是最大内容绘制(LCP)元素,还会拖累 LCP 指标与图片 SEO。

主要能力:扫描代码库中的 img src 属性与 CSS background-image URL,找出版本中不存在的相对或绝对路径、缺少 onerror 处理或回退机制的 img 元素、可能失效的硬编码外部图片 URL,以及由用户数据拼接、未经存在性校验的动态图片路径,并报告文件路径与行号。同时检查编码后体积、渲染尺寸、加载策略与相关构建或 CDN 转换。

处理方式:若图片存在但路径错误则修正路径;若资源缺失则补齐资源;对运行时可能失败的图片添加 onerror 处理,例如 onerror="this.src='/images/fallback.png'; this.onerror=null;",并务必在处理器内设置 this.onerror=null 以防止无限错误循环。React/Vue 组件可实现 onError 回调切换为占位图;外部图片可考虑下载自托管或使用带回退的 CDN。

验证与限制:可在 DevTools 的 Network 面板中屏蔽请求,验证回退行为是否生效。资料未提供具体框架的完整实现细节、代码示例与自动检测工具,这些内容指向 references/rule.md;具体价格、平台支持范围与效果指标暂未提供。