使用Cheerio爬取电商网站时图片链接获取异常问题求助

嘿，我来帮你搞定这个图片链接的问题！这其实是电商网站常用的懒加载优化策略导致的，很常见～

问题根源 #

你拿到的data:image/gif;base64,...是一张1x1的占位GIF。Jumia这类电商站为了提升页面加载速度，会给商品图片做懒加载处理：初始加载时用占位图填充src属性，而真实的图片链接会藏在自定义的data-*属性里（比如data-src），只有当图片滚动到浏览器可视区域时，才会把真实链接替换到src中。你的爬虫直接读取src，自然只能拿到占位图啦。

具体解决方案 #

第一步，先确认真实链接的属性名：打开目标页面的开发者工具（F12），找到商品的img标签，你会看到类似这样的结构：

<img class="image-wrapper img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://tn.jumia.is/D8RjVA7gYqsaxxwKgqOa_6582_k=/fit-in/220x220/filters:fill(white):sharpen(1,0,false):quality(100)/product/48/9141/1.jpg?5043" />

然后修改你的代码，把读取src改成读取对应的data-src属性即可：

product = {
  // 替换原来的image字段，优先取data-src，兼容特殊情况再回退到src
  image: $image.attr("data-src") || $image.attr("src"),
  productName: $productName.text(),
  price: $price.text().trim(),
  currencyTag: $currencyTag.text().trim(),
  categorie: $categorie,
  availability: $availability.text().trim(),
  site: $site.attr("alt"),
  refProduct: $refProduct.text(),
  prodcutLink: $productLink.attr("href")
};

额外小技巧 #

如果你不确定属性名，可以先在代码里打印出img标签的所有属性，精准定位真实链接的位置：

console.log($image.attr()); // 输出该img标签的所有属性键值对，一目了然

这样就能轻松拿到真实的商品图片链接啦！

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