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

Question

当服务器中不存在我的图像或图像 URL 不正确时，我收到异常错误。我该如何处理颤振中的这个错误？我可以使用 future 来处理这个错误吗？我尝试了未来，但我无法弄清楚。

这是一个屏幕截图：

代码

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: Invalid statusCode: 404, uri = http://192.168.1.3/assets/topItemCategory/login_main_img.png )

Answer 1

IDE 告诉你有异常，但实际上没问题。原因显然是因为 Dart VM 没有将其识别为捕获的异常，尽管它是捕获的异常。只需按继续按钮或取消选中断点以发现未捕获的异常。你会发现你的意志errorWidget出现了。

该插件的作者实际上添加了有关此问题的常见问题解答。

Answer 2

您可以使用透明图像插件来实现此目的。 链接到透明图像发布页面

示例代码：（取自透明图像页面）

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

希望这是您所需要的。