Spring项目使用Jsoup爬取Jumia.ma笔记本产品数据时img标签src获取异常

问题根因 #

目标站点为优化首屏加载速度，采用了图片懒加载机制：默认给img标签的src属性填充1像素占位GIF的base64编码/数字占位值，真实的图片资源地址存放在data-src、data-lazy这类自定义属性中，直接读取src属性自然只能拿到占位值。

解决方案 #

• 先确认站点真实图片地址存放的属性名：通过浏览器F12元素检查器，随意选中一个商品图片的img标签，查看除src外的其他属性，找到存储完整图片URL的属性即可，Jumia类电商站点通常用data-src或data-original存储真实地址。
• 修改Jsoup属性取值逻辑：将原abs:src的取值替换为对应自定义属性的绝对地址读取，比如真实地址在data-src就改为attr("abs:data-src")。
• 优化元素匹配逻辑：原实现分别取名称、价格、图片列表按下标对应，很容易出现下标错位问题，建议先遍历商品卡片父元素，再从单个父元素内读取对应子元素属性，避免错位，修改后参考代码如下：

String url1 = "https://www.jumia.ma/pc-portables/";
// 增加浏览器UA请求头，避免站点识别为爬虫返回异常内容
Document doc1 = Jsoup.connect(url1)
        .userAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")
        .get();

// 先匹配所有商品卡片父元素，Jumia商品卡片通用class为prd
Elements productCards = doc1.select(".prd");
// 取前10个商品，避免下标越界
for (Element card : productCards.subList(0, Math.min(10, productCards.size()))) {
    Element nameEle = card.selectFirst(".name");
    Element priceEle = card.selectFirst(".prc");
    Element imgEle = card.selectFirst("img");
    // 统一判空避免空指针异常
    if (nameEle == null || priceEle == null || imgEle == null 
        || nameEle.ownText().isBlank() || priceEle.ownText().isBlank()) {
        continue;
    }
    Produit p = new Produit();
    p.setNom(nameEle.ownText());
    p.setPrix(priceEle.ownText());
    // 读取data-src属性的绝对地址，属性名可根据实际站点结构调整
    p.setImage(imgEle.attr("abs:data-src"));
    // 商品详情页地址从卡片a标签读取，不要写死列表页地址
    Element linkEle = card.selectFirst("a.core");
    if (linkEle != null) {
        p.setUrl(linkEle.attr("abs:href"));
    }
    p.setIdcategorie(5);
    produitRepository.save(p);
}

额外提示：如果调整属性后还是取不到值，可先打印获取到的doc1完整HTML内容，确认Jsoup请求拿到的DOM结构和浏览器端看到的结构是否一致，部分反爬严格的站点会对无UA的爬虫请求返回截断的异常页面。

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