Flutter：找不到网络图像或获取错误时显示本地图像？

Posted 2023-03-28

【中文标题】Flutter：找不到网络图像或获取错误时显示本地图像？

【英文标题】：Flutter : Display Local Image when Network Image not found or error fetching it?

【发布时间】：2020-09-15 13:23:21

【问题描述】：

Center(
                child: CachedNetworkImage(
                  imageUrl: "http:/ sosme link here",
                  errorWidget: (context, url, error) => Icon(Icons.error),
                  fadeInCurve: Curves.easeIn ,
                  fadeInDuration: Duration(milliseconds:1000),
                  fadeOutCurve: Curves.easeOut,
                  fadeOutDuration: Duration(milliseconds:500),
                  imageBuilder: (context, imageProvider) => Container(
                    height: 250.0,
                    width: 250.0,
                    decoration: BoxDecoration(
                    border: Border.all(
                    color: Colors.black,
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    color: Colors.white,
                    image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover,
                    ),
                    ),
                  ),
                ),
              ),  

我的目标是从可能存在也可能不存在的 URL 加载图像。 如果 URL 不存在，则加载资产图像。 尝试在此处插入资产图像，但没有用。 正如我在想，如果加载它时出错，意味着没有找到图像或其他东西。所以我想显示一个本地图像。

有什么建议吗？

errorWidget: (context, url, error) => Icon(Icons.error),

错误，当我使用资产图像时

【参考方案1】：

您可以将FadeInImage 小部件用于您的用例..

这是给你的样本..

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  

你可以得到more information from official website。

【参考方案2】：

确保图像存在于路径中的资产文件夹中。 例如：

errorWidget: (context, url, error) => Image.asset('assets/images/image.jpg'),

并在pubspec.yaml 文件中声明该路径。 例如：

assets:
    - assets/images/image.png

【讨论】：

你好。我试过了。但假设 URL 不可用，它给了我一个错误（我通过上传屏幕截图编辑了问题）。

@nelsonwong：在您的代码中，我看不到异常处理，即使您输入了错误的 URL，我的代码也应该按照 CachedNetworkImage 工作

感谢@srikanth7785 使用 Try/Catch 块解决。

【参考方案3】：

CachedNetworkImage(
imageUrl: "your image url",
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
placeholder: (context,url) => CircularProgressIndicator(),
errorWidget: (context,url,error) => new Icon(Icons.error))

【讨论】：

解释会改善这个答案