Flutter-失败时默认图像为Image.network

Question

有什么方法可以控制Image.network（）启动的异常，以便为它提供默认的AssetImage？

Answer 1

你可以用 FadeInImage.assetNetwork

 child: new Container(
      child: FadeInImage.assetNetwork(
          placeholder: 'place_holder.jpg',
          image:url
      )
  )

并在 pubspec.yaml 中

  assets:
  - assets/place_holder.jpg

Answer 2

这取决于您的用例，但是一种实现方法是使用FadeInImage，该属性img对于要加载的图像具有的属性placeholder，对于占位符而言，以及

FadeInImage(image: NetworkImage(url), placeholder: AssetImage(assetName)

您也可以收听直到图像加载完毕，然后自己显示一个占位符，直到解析出图像为止。

伪码

bool _loaded = false;
var img = Image.network(src);
var placeholder = AssetImage(assetName)

@override
void initState() {
  super.initState();
  img.image.resolve(ImageConfiguration()).addListener((i, b) {
    if (mounted) {
      setState(() => _loaded = true);
    }
  });     
}

@override
Widget build(BuildContext context) { 
  return YourWidget(
    child: _loaded ? img : placeholder,
  );
}

Answer 3

有一个名为的新包可以满足cached_network_image您的需求。在这里，您可以立即设置“加载”图像和“错误”图像。

一个颤振库，用于显示来自互联网的图像并将它们保存在缓存目录中。 https://pub.dev/packages/cached_network_image#-readme-tab-

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => new CircularProgressIndicator(),
        errorWidget: (context, url, error) => new Icon(Icons.error),
     ),

或者您可以使用自己的资产图像作为占位符，例如：

...
placeholder: (context, url) => {return Image.asset('assets/img/my_placeholder.png');},

将此添加到您的包的 pubspec.yaml 文件中：

dependencies:
  cached_network_image: ^1.1.1

并导入您的飞镖代码：

import 'package:cached_network_image/cached_network_image.dart';

Answer 4

您可以使用小部件官方文档中指定的 loadingBuilder 和 erroBuilder 属性：

               Image.network(
                  'https://example.com/image.jpg',
                  errorBuilder: (context, error, stackTrace) {
                    print(error); //do something
                  },
                  loadingBuilder: (BuildContext context, Widget child,
                      ImageChunkEvent loadingProgress) {
                    if (loadingProgress == null) return child;
                    return Center(
                      child: CircularProgressIndicator(
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded /
                                loadingProgress.expectedTotalBytes
                            : null,
                      ),
                    );
                  },
                ),

https://api.flutter.dev/flutter/widgets/Image/loadingBuilder.html https://api.flutter.dev/flutter/widgets/ImageErrorWidgetBuilder.html