如何使用 Flutter/Dart 抓取 img 标签的“数据”属性值答案

【问题标题】：How to scrape "data" attribute value of an img tag with Flutter/Dart如何使用 Flutter/Dart 抓取 img 标签的“数据”属性值
【发布时间】：2021-09-28 22:20:11
【问题描述】：

我正在尝试从网页中抓取数据。我想获取 img 标签内的 src 属性值（如图所示）：

我使用了以下代码：

final picp = document.getElementsByClassName("inline-table");
pics = picp.map((e) => e.getElementsByTagName("img")[0].attributes['src']).toList();

不幸的是，我得到了这个结果：

有什么建议吗？提前谢谢你！

【问题讨论】：

这些是 base64 字符串而不是图像链接，您必须将它们保存为图像。或者如果你想在某个地方显示它们，只需将这些字符串放在 src 属性中，浏览器就会将它们显示为图像
当你说你想“获取 src 属性值”时，你的意思是你想获取字符串列表，其中每个元素都是一个带有图像 url 的字符串？
@jabbson: 是的，这就是我想要的。我想得到一个包含每个 img src 属性值的字符串列表
查看答案以找到获取每个 img 的字符串列表的代码。

标签： flutter dart web-scraping src

【解决方案1】：

如果您需要获取字符串列表，并且由于标签中有dart，这将为您提供带有 url-s 的字符串列表。如果您打算在 UI 中使用它，您需要做的就是用它制作一个 ListView。

void main() {
  String html = getHtml(); // this gets the html with inline-tables

  Document document = parse(html);
  List<Element> tables = document.getElementsByClassName("inline-table");
  List<String?> pics = tables
      .map((e) => e.getElementsByTagName("img")[0].attributes['src'])
      .toList();

  for (var e in pics) {
    print(e);
  }
}

我还可以使用 ListView 构建器来制作列表

return ListView.builder(
    itemCount: items.length,
    itemBuilder: (contex, i) {
        return Card(child: Text(items[i] ?? ""));
    }
);

这段代码产生了结果，你可以找到here。

【讨论】：