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

Posted 2023-02-22

【中文标题】如何在颤动中使用 CachedNetworkImage 处理 404 异常

【英文标题】：how to handle 404 exception with CachedNetworkImage in flutter

【发布时间】：2020-10-10 22:41:21

【问题描述】：

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

这是截图：

代码

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)

【问题讨论】：

嘿，伙计。你解决了这个问题吗？解决办法是什么？

【参考方案1】：

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

插件的作者居然加了FAQ关于这个问题。

【参考方案2】：

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

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

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

希望这是您所需要的。