firebase - getter 'image' 在 null 上被调用

Question

我正在尝试从 Cloud fire 存储中获取 url 列表，并使用它从 fire base 存储中获取图像。

图像按预期加载，但控制台显示如下错误。

I/flutter (24353): The following NoSuchMethodError was thrown during a 
scheduler callback:
I/flutter (24353): The getter 'image' was called on null.
I/flutter (24353): Receiver: null
I/flutter (24353): Tried calling: image
I/flutter (24353): When the exception was thrown, this was the stack:

我试过的。

StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('images').snapshots(),
      builder: (BuildContext context,
          AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) return new CircularProgressIndicator();
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return new Center(child: new CircularProgressIndicator());
          default:
            return new StaggeredGridView.countBuilder(
              padding: const EdgeInsets.all(8.0),
              crossAxisCount: 4,
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, i) {
                String imgPath = snapshot.data.documents[i]['link'];
                return new Material(
                  elevation: 8.0,
                  borderRadius:
                  new BorderRadius.all(new Radius.circular(8.0)),
                  child: new InkWell(
                    child: new Hero(
                      tag: imgPath,
                      child: new FadeInImage(
                        image: new NetworkImage(imgPath),
                        fit: BoxFit.cover,
                        placeholder: new AssetImage("images/images.jpg"),
                      ),
                    ),
                  ),
                );
              },
              staggeredTileBuilder: (i) =>
              new StaggeredTile.count(2, i.isEven ? 2 : 3),
              mainAxisSpacing: 8.0,
              crossAxisSpacing: 8.0,
            );
          }
        },
    )

Answer 1

如果图像加载正常但如您所述有空错误，则 Widget build() 的第一次运行可能在 NetworkImage() 上有空图像 URL >。解决方法是对 imgPath 进行空检查。 placeholder 参数只有在图像 URL 不为 null 时才能正常工作，如 here 所示。 .

FadeInImage(
    // if imgPath != null, display Networkimage, else display AssetImage
    image: (imgPath != null)? NetworkImage(imgPath) : AssetImage("images/images.jpg"),
    fit: BoxFit.cover,
),

此处的另一个选择是在 Image.network() 上使用 loadingBuilder 和 errorBuilder 构造函数

Image.network(
     imgPath,
     fit: BoxFit.cover,
     // display progress indicator
     loadingBuilder: (BuildContext context, Widget child,
         ImageChunkEvent loadingProgress) {
       if (loadingProgress == null) return child;
       return CircularProgressIndicator(
         value: loadingProgress.expectedTotalBytes != null
             ? loadingProgress.cumulativeBytesLoaded /
                 loadingProgress.expectedTotalBytes
             : null,
       );
     },
     // display error image
     errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
         debugPrint('Error loading image: $exception \n Stack trace: $stackTrace');
         return Image.asset('images/error_loading.png');
     },
),