Flutter使用http包请求API后如何展示返回的网络图片

你当前代码有两个核心问题需要调整：一是请求的接口返回的是图片数据数组，现有解析逻辑适配的是单条数据，会报错；二是NetworkImage没有传入接口返回的图片地址。完整修改方案如下：

1. 调整数据请求解析逻辑 #

你调用的接口返回的是List结构，需要把原来解析单条数据的逻辑改成解析数组：

Future<List<CartModel>> fetchCartModelList() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));

  if (response.statusCode == 200) {
    List<dynamic> jsonList = jsonDecode(response.body);
    return jsonList.map((json) => CartModel.fromJson(json)).toList();
  } else {
    throw Exception('Failed to load data');
  }
}

2. 调整页面渲染逻辑 #

用FutureBuilder接收异步返回的图片数据，把接口返回的图片地址传给NetworkImage即可正常渲染：

class _CarsState extends State<Cars> {
  // 修改变量类型为数组的Future
  Future<List<CartModel>> futureCartModelList;
  
  @override
  void initState() {
    super.initState();
    futureCartModelList = fetchCartModelList();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<CartModel>>(
      future: futureCartModelList,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          // 用GridView展示多张图片，也可以根据需求换成ListView
          return GridView.count(
            crossAxisCount: 2,
            children: snapshot.data!.map((cartItem) {
              return Container(
                width: 180,
                height: 139,
                margin: EdgeInsets.all(5),
                decoration: BoxDecoration(
                  image: DecorationImage(
                    // 传入接口返回的缩略图地址，也可以替换为cartItem.url用原图
                    image: NetworkImage(cartItem.thumbnailUrl),
                    fit: BoxFit.fill,
                  ),
                ),
                // 如需展示标题可以保留下面的代码，不需要直接删除即可
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    color: Colors.black54,
                    width: double.infinity,
                    padding: EdgeInsets.all(4),
                    child: Text(
                      cartItem.title,
                      style: TextStyle(color: Colors.white, fontSize: 12),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  )
                ),
              );
            }).toList(),
          );
        } else if (snapshot.hasError) {
          return Center(child: Text("加载失败：${snapshot.error}"));
        }
        // 加载中状态展示
        return Center(child: CircularProgressIndicator());
      },
    );
  }
}

注意事项 #

• 请确保已经在pubspec.yaml中正确引入http依赖，且Android、iOS端的网络权限配置正常，没有拦截http请求
• 如果你只需要展示单张图片，可以把请求地址换成单条数据接口https://jsonplaceholder.typicode.com/photos/1，不需要改数组解析逻辑，直接把单条数据的图片地址传给NetworkImage即可

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