首页 > 解决方案 > 如何获取和显示一组网络图像?

问题描述

我正在从列表中的 AWS 获取一组图像,并使用 .map 显示它。我不知道我做得对不对。我有一个错误'package:flutter/src/painting/_network_image_io.dart': Failed assertion: line 25 pos 14: 'url != null': is not true.但是如果我像这样手动显示它,效果会很好,Image.network('https://thisIsJustSampleLink.s3.us-east-2.amazonaws.com/id/sampleOnly/bb.jpg')

这是我的代码。从数据库中获取数据。babyimage[] 是来自 AWS 的图像链接数组。

List <String> _babyList = List();

Future<void> getApplicantInfo() async {
AuthService().getRequestorApplicants().then((val) async {

  requestorApplicants.clear();
  _babyList.clear();

  for (var i = 0; i < val.data.length; i++) {
    var temp = val.data[i];
    setState(() {
      requestorApplicants.add(new RequestorApplicantsList(
        parentname: temp['parentname'],
        babyname: temp['babyname'],
      ));
      _babyList.add(temp['babyimage[]']);
    });
  }

});
}

使用 Image.network 显示列表

Container(
   height: MediaQuery.of(context).size.height,
   child: ListView(
   shrinkWrap: true,
   scrollDirection: Axis.vertical,
   children: <Widget>[
   Column(
       children: _babyList.map((e) => Image.network(e)).toList(),
    ),
   ],
)),

标签: amazon-web-serviceslistimagedartamazon-s3

解决方案


在这段代码中_babyList.map((e) => Image.network(e)).toList(),一些 url(或者可能全部)为空。添加过滤器以删除空元素。

_babyList.where((e) => e != null).map((e) => Image.network(e)).toList(growable:false)

如果它们不能为空,请检查您的代码,也许某处存在错误


推荐阅读