如何在Flutter中使用CachedNetworkImage处理404异常

Question

当服务器中没有我的图像或图像URL不正确时，出现异常错误。如何处理抖动中的错误？我可以使用Future处理此错误吗？我尝试过未来，但我无法弄清楚。这是enter image description here我的代码和屏幕截图。请帮助我，谢谢

代码

import 'package:cached_network_image/cached_network_image.dart';   
import './responsive/resp_safe_area.dart';
import './common/styling.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import './responsive/size_config.dart';


void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitUp,
  ]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final appTitle = "Bigshopy";

  @override
  Widget build(BuildContext context) {
    try {
      return MediaQuery(
        data: MediaQueryData(),
        child: ResponsiveSafeArea(builder: (context, size) {
          SafeSizeConfig().init(size);
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: appTitle,
            theme: BigAppTheme.defaltTheme,
            home: Scaffold(
              appBar: AppBar(),
              body: SingleChildScrollView(
                child: Center(
                  child: Container(
                    child: CachedNetworkImage(
                      fit: BoxFit.fill,
                      imageUrl:
                          'http://192.168.1.3/bigshopy/assets/topItemCategory/login_main_img.png',
                      placeholder: (context, url) =>
                          CircularProgressIndicator(),
                      errorWidget: (context, url, error) =>
                          new Icon(Icons.error),
                    ),
                  ),
                ),
              ),
            ),
          );
        }),
      );
    } catch (error) {
      print(error);
    }
  }
}

错误消息

发生异常。 HttpExceptionWithStatus（HttpException：无效的statusCode：404，uri = http://192.168.1.3/assets/topItemCategory/login_main_img.png）

错误消息图片

Error message Image

Answer 1

IDE 告诉您存在异常，但实际上没问题。原因显然是因为 Dart VM 没有将其识别为捕获的异常，即使它是。只需按继续按钮或取消选中未捕获异常的断点。您会看到您的 errorWidget 会出现。

该插件的作者实际上添加了关于此问题的 FAQ。

Answer 2

您可以为此使用透明图像插件。 Link to the Transparent image pub page

示例代码：（摘自“透明图像”页面）

    FadeInImage.memoryNetwork(
    placeholder: kTransparentImage,
    image: 'https://picsum.photos/250?image=9',
  ),
);

希望这就是您所需要的。