颤抖如何处理Image.network错误（例如404或错误的URL）

Question

Image.network网址错误或目的地指向404时如何处理。

例如尝试

Image.network('https://image.tmdb.org/t/p/w92')

Answer 1

我已经使用 errorBuilder 处理了与 404 相关的网络图像问题。

Image.network('Your image url...',
    errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
        return Text('Your error widget...');
    },
),

errorBuilder 属性

Answer 2

更新：看看使用内置方法的新的准确方法，由@Niraj Phutane在这里回答，不需要插件。

旧答案

我建议使用cached_network_image，它提供了添加占位符图像的选项，以及在 404 或 403 的情况下的错误小部件。

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

Answer 3

可以使用 Image.network 或 Image.asset 中的 errorBuilder

Image.network(
       path.image,
       width: 40,
       height: 40,
       errorBuilder: (BuildContext context, Object exception,
            StackTrace? stackTrace) {
         return const Text('');
       },

Answer 4

当您在加载图像时发现 404 或任何其他错误时，您可以显示来自资产的图像。

我所做的是：

  FadeInImage(
      image: NetworkImage("imageUrl"),
      placeholder: AssetImage(
          "assets/images/placeholder.jpg"),
      imageErrorBuilder:
          (context, error, stackTrace) {
        return Image.asset(
            'assets/images/error.jpg',
            fit: BoxFit.fitWidth);
      },
      fit: BoxFit.fitWidth,
    )

检查imageErrorBuilder财产。

Answer 5

代替Network.image使用NetworkImageWithRetry

https://pub.dartlang.org/documentation/flutter_image/latest/

例：

var avatar = Image(
  image: NetworkImageWithRetry('http://example.com/avatars/123.jpg'),
);

Answer 6

您可以使用ImageStream它来处理错误。

class CustomProductImage extends StatefulWidget {
  final String image;

  const CustomProductImage(this.image);

  @override
  State<CustomProductImage> createState() => _CustomProductImageState();
}

class _CustomProductImageState extends State<CustomProductImage> {
  Widget mainWidget = const CircularProgressIndicator(); // Placeholder widget
  @override
  void initState() {
    super.initState();

    Image image = Image.network(widget.image, width: 50, height: 50);

    final ImageStream stream = image.image.resolve(ImageConfiguration.empty);

    stream.addListener(ImageStreamListener((info, call) {
      if (!completer) {
        completer = true;
        setState(() {
          mainWidget = image;
        });
      }
    }, onError: (dynamic exception, StackTrace? stackTrace) {
      print('Error is $exception , stack is $stackTrace');
      setState(() {
        mainWidget = const Icon(Icons.error); // Error Widget
      });
    }));
  }

  @override
  Widget build(BuildContext context) {
    return mainWidget;
  }
}