检测项 · 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 状态证据。