HTML解析提取lazyload图片data-src链接失败问题咨询

云上老周

2026-8-29

提取图书网站懒加载图片真实地址的问题修复

现有实现与问题

初始编写的元素抓取代码如下：

var listAll= document
      .querySelectorAll("div.prd-wrapper div.product-img")
      .map((e) => e.getElementsByTagName("a")[0])
      .toList();
  listAll.forEach((element) {
   print(element.innerHtml);
 });
}

运行后可在输出中看到，站点图片采用懒加载形式，真实地址存放在img标签的data-src属性上：

<img class="lazyload" data-src="https://i.dr.com.tr/cache/154x170-0/originals/0001742911001-1.jpg" alt="Minik Elif'in Tuvalet 
<img class="lazyload" data-src="https://i.dr.com.tr/cache/154x170-0/originals/0001847750001-1.jpg" alt="Unutma Mutlu Bir Hayat Çok Az

之前编写的提取代码无法生效，核心原因是API使用逻辑错误：

var img=listAll.forEach((element) {
    print(element.getElementsByTagName("data-src").length);
  });

getElementsByTagName的作用是查找对应名称的HTML标签，比如a、img这类标签名，data-src是标签上的自定义属性，根本不是标签，因此永远查不到匹配结果。

修正后的可运行代码

// 存储所有提取到的真实图片地址
List<String> realImageUrls = [];

var listAll = document
    .querySelectorAll("div.prd-wrapper div.product-img")
    .map((e) => e.getElementsByTagName("a")[0])
    .toList();

listAll.forEach((aElement) {
  // 先找到a标签内部的img子元素
  var imgList = aElement.getElementsByTagName("img");
  if (imgList.isEmpty) return;
  // 读取img标签上的data-src属性，即为懒加载的真实图片地址
  var imgUrl = imgList[0].attributes["data-src"];
  if (imgUrl != null) {
    realImageUrls.add(imgUrl);
    print("获取到图片地址：$imgUrl");
  }
});