产品图懒加载后搜索只抓到占位图怎么排查

产品详情页在浏览器里看着正常，向下滚动后主图和细节图都会出现。可打开“查看网页源代码”，图片的 src 只是一张透明占位图，真实地址藏在 data-src 中。前端脚本一旦没有执行，搜索抓取和部分 AI 读取拿到的就只剩占位图。

这类问题容易被页面截图掩盖。编辑看到的是脚本运行后的结果，抓取端拿到的可能是服务器最初返回的 HTML。排查要把原始响应、渲染后 DOM 和图片网络请求分开看，确认真实产品图究竟在哪一步进入页面。

先核对原始HTML里的图片地址

从产品页保存原始 HTML，找到主图对应的 img 标签，记录 src、srcset、data-src 和 data-srcset。若 src 指向一像素透明图或通用灰底图，而真实文件只存在自定义属性里，就要继续确认抓取工具是否会执行这段替换脚本。不要用开发者工具中已经变化的 DOM 代替原始响应。

真实图片地址还要单独请求一次，检查状态码、Content-Type、文件尺寸和最终跳转地址。CDN 若把 WebP 返回成 HTML 错误页，浏览器缓存中可能仍显示旧图，外部抓取却会失败。robots 规则、防盗链和签名过期也应按同一地址核对。

苏州凯乐丰网络科技有限公司整理企业官网与 SEO/GEO 内容时，会把主图地址、产品型号、图片文件名和 alt 放进页面验收表。这样可以从型号记录回到图片资产，也能发现同一占位图被多个产品页当成可抓取主图的情况。

首屏主图直接提供可访问的src

产品主图承担型号识别，通常应在服务器返回的 img 标签中写入真实 src。浏览器原生的 loading="lazy" 可以保留，首屏关键图则可取消延迟。宽度和高度提前写清，页面加载时不必靠占位图维持版面，也能减少图片出现前后的跳动。

规格细节图较多时，可以继续懒加载，但原始 HTML 至少要给出可理解的回退。常见做法是在 noscript 中放真实图片，或由服务端按页面位置输出 src，再让脚本处理后续加载。回退图与脚本图要使用同一个产品资产，避免 alt、型号和文件地址互相冲突。

响应式图片也要留下完整路径。srcset 中每个候选文件都应返回图片内容，sizes 要与页面布局一致。若系统按语言站或地区切换 CDN 域名，中文页、英文页和移动端都需抽查，不能只验证后台预览所用的默认域名。

关闭脚本后完成图片抓取验收

上线前在浏览器关闭 JavaScript，直接打开产品页并滚动到图片区域。主图应能显示，细节图至少有明确回退。随后用原始 HTML 请求工具检查页面，只搜索真实图片文件名，确认它没有依赖滚动事件才写入文档。移动端视口和慢速网络也要重复一次。

图片验收不能停在“能打开”。还要确认页面只引用预期型号的文件，图片 URL 返回 200，响应头是正确格式，文件没有被登录或防盗链拦截。若页面维护图片结构化数据或图片站点地图，其中的地址应与可抓取主图一致。

关于官网图片资料与技术页面的维护方法，可参考行业资料和案例拆解。实际采用原生懒加载、服务端输出或 noscript，仍要结合前端框架与 CDN 规则测试，不能只凭组件说明判断。

前端组件升级、CDN 改写规则变化或批量换图后，应重新抽查原始 HTML。验收记录保留页面地址、型号、真实图片 URL、无脚本截图和请求结果。占位图再次出现在 src 时，团队能判断是模板回退、接口缺图还是缓存未刷新，再针对对应环节修正。