使用Puppeteer爬取网页时如何获取img真实URL而非base64链接

问题原因 #

你抓取到base64格式的图片链接是因为目标站点使用了图片懒加载技术：img标签的src属性默认放置的是极小体积的占位SVG（base64编码），真实图片的URL存放在img标签的自定义数据属性中，通常为data-src、data-original这类属性。

解决方法 #

修改代码中提取图片链接的逻辑，优先读取img的懒加载数据属性即可，调整后的image_link字段提取逻辑如下：

image_link: article.querySelector("div.bn-box-img > a > img")
  ? (article.querySelector("div.bn-box-img > a > img").getAttribute("data-src") || 
     article.querySelector("div.bn-box-img > a > img").getAttribute("src"))
  : "",

如果上述data-src无法获取到有效URL，可以打开目标站点的浏览器调试工具，查看任意文章图片的img标签属性，找到存放真实URL的属性名替换data-src即可，无需修改其他逻辑。

补充：如果提取到的真实链接是相对路径（开头为/且不带域名），可以手动拼接站点域名前缀组装成完整URL后再存入数据库。

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