Flutter中如何从非图片链接读取图片？

Image.network只能加载图片资源的直接URL（如.jpg/.png这类后缀的资源地址），你传入的是网页URL（HTML页面），它本身不是图片文件，所以直接调用肯定无效。要实现需求，需要先爬取网页中的图片链接，再用Image.network加载，步骤如下：

1. 添加依赖 #

在pubspec.yaml中加入网络请求和HTML解析的依赖：

dependencies:
  http: ^1.1.0
  html: ^0.15.4

2. 实现网页图片提取与加载 #

下面是完整的示例代码，包含网页请求、HTML解析提取图片、图片加载的逻辑：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:html/parser.dart' as parser;
import 'package:html/dom.dart' as dom;

class WebImageLoader extends StatefulWidget {
  final String webUrl;
  const WebImageLoader({super.key, required this.webUrl});

  @override
  State<WebImageLoader> createState() => _WebImageLoaderState();
}

class _WebImageLoaderState extends State<WebImageLoader> {
  List<String> imageUrls = [];
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    _fetchWebImages();
  }

  Future<void> _fetchWebImages() async {
    try {
      final response = await http.get(Uri.parse(widget.webUrl));
      if (response.statusCode == 200) {
        dom.Document document = parser.parse(response.body);
        // 提取所有img标签的src属性
        final imgElements = document.querySelectorAll('img');
        setState(() {
          // 过滤空URL，处理相对路径转绝对路径
          imageUrls = imgElements
              .map((img) => img.attributes['src'] ?? '')
              .where((url) => url.isNotEmpty)
              .map((url) => url.startsWith('http') 
                  ? url 
                  : Uri.parse(widget.webUrl).resolve(url).toString())
              .toList();
          isLoading = false;
        });
      }
    } catch (e) {
      setState(() => isLoading = false);
      print('获取图片失败：$e');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemCount: imageUrls.length,
      itemBuilder: (context, index) {
        return Image.network(
          imageUrls[index],
          fit: BoxFit.cover,
          errorBuilder: (_, __, ___) => const Icon(Icons.broken_image),
        );
      },
    );
  }
}

// 使用方式
// WebImageLoader(webUrl: "目标网页链接")

3. 注意事项 #

• 跨域限制：部分网站会有CORS拦截，直接在Flutter中请求可能失败，这种情况需要通过后端代理转发请求。
• 精准提取图片：如果只需要网页中的特定图片（比如新闻主图），可以通过筛选img标签的class、alt等属性缩小范围，比如document.querySelectorAll('img.article-main-image')。
• 性能优化：批量加载图片时，推荐使用cached_network_image包替代Image.network，实现图片缓存，提升加载体验。

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