检测项 · BROKEN_IMAGE
如何检测网站坏图:BROKEN_IMAGE 浏览器检查
坏图检查关注用户真正看到的图片结果。CheckHere 在 Chromium 页面环境里观察图片加载状态和资源请求,再把 URL、页面位置与截图证据写入本地报告。
什么情况会触发坏图问题
图片请求失败、资源返回错误状态或图片元素完成加载后仍缺少有效尺寸,都可能形成 BROKEN_IMAGE 证据。
- 图片 URL 返回 404、403 或 5xx
- 构建产物缺少被页面引用的静态资源
- CDN 或跨域配置让浏览器无法读取图片
- 图片元素存在,浏览器得到的自然宽高为零
本地复现
先运行开发服务器,再让 CheckHere 检查包含图片的明确路由。HTML 报告中的桌面与移动端截图可帮助确认视觉影响。
checkhere http://localhost:3000 --routes routes.txt
open ./checkhere-reports/latest/report.html常见修复
核对 public 目录、构建后的资源路径、大小写和部署 base path。远程资源还需要检查响应状态、CORS 和防盗链规则。
验收标准
修复后再次运行同一条命令。报告中对应 BROKEN_IMAGE 消失,截图呈现预期图片,相关网络请求成功。
常见问题
为什么浏览器里偶尔能看到图片,检查仍然报错?
缓存、鉴权、防盗链和间歇性 CDN 响应都可能造成差异。报告里的请求状态和检查时间能帮助定位。
背景图会被检查吗?
网络失败采集可以覆盖浏览器请求到的 CSS 背景资源,图片元素还会获得额外的 DOM 状态证据。