使用Google Sheets ImportXML/XPath爬取图片时输出异常的解决求助

我之前也碰到过一模一样的情况，咱们一步步拆解问题和对应的解决方案：

为什么会返回data:image/svg+xml,...？ #

这个SVG是Material UI的加载占位骨架（Skeleton组件），本质原因是：

Google Sheets的ImportXML只能抓取服务器返回的初始静态HTML，完全不会执行页面中的JavaScript。如果你的网站是React/Vue这类框架做的客户端渲染（CSR），真实图片URL是通过JS动态注入到DOM里的，初始HTML里只有这个占位符SVG，所以ImportXML只能抓到它。

先搞定XPath失效的问题 #

你说XPath已经失效，这是Material UI的JSS样式系统导致的——它会生成带随机后缀的动态类名（比如jss358），每次部署代码都会变，根本不能用来写稳定的XPath。

你得改用静态标识定位元素：

• 找容器的固定类名：比如图片所在的div有product-image-container这类不变的类，就写//div[contains(@class,'product-image-container')]//img/@src
• 用图片的data-*属性：很多网站会给图片加数据属性（比如data-product-id），可以写//img[@data-product-id]/@src
• 用图片的alt文本：如果alt文本有固定规律（比如包含产品名称），写//img[contains(@alt,'你的产品关键词')]/@src

解决SVG占位符的核心方案 #

既然ImportXML不支持JS渲染，有几个靠谱的替代路径：

方案1：直接从自家网站后端拿数据（最推荐） #

因为是自家网站，完全可以绕过前端页面，直接从后端API或数据库导出图片URL列表：

• 如果网站有API接口（比如/api/products）返回带图片URL的JSON，用Google Sheets的ImportJSON自定义函数直接拉取数据。
• 或者定期从数据库导出CSV，再导入到Sheets里。

方案2：用Google Apps Script + JS渲染工具 #

如果必须用爬虫，你可以写一段脚本配合能渲染JS的服务：

1. 把脚本部署到Google Cloud Functions，用Puppeteer（无头浏览器库）加载页面并等待JS渲染完成，提取图片URL。
2. 再在Google Sheets里调用这个Cloud Function的接口获取结果。

方案3：检查是否是服务器端渲染（SSR） #

如果你的网站用了Next.js、Gatsby这类SSR框架，初始HTML里应该包含真实图片URL。你可以先在浏览器里禁用JavaScript（Chrome按F12→设置→勾选"Disable JavaScript"），刷新页面后查看图片的src属性：

• 如果能看到真实URL：只需要把XPath调整到静态元素即可。
• 如果还是SVG：说明是纯CSR，必须用方案1或方案2。

快速验证步骤 #

1. 打开浏览器开发者工具，切换到「Network」标签，选择「Doc」类型，刷新页面。
2. 查看服务器返回的原始HTML（右键→查看页面源代码），搜索img标签：
   • 若能看到真实URL：调整XPath到静态元素即可解决。
   • 若只有SVG占位符：说明是CSR，得换方案。

内容的提问来源于stack exchange，提问作者Jesper