Question

有没有办法可以控制Image.network（）启动的异常，这样你就可以为它提供一个默认的AssetImage？

Answer 1

这取决于您的使用案例，但一种方法是使用FadeInImage，其img属性用于要加载的图片，placeholder，好吧，对于占位符

FadeInImage(image: NetworkImage(url), placeholder: AssetImage(assetName)

您也可以一直聆听图像加载并自己显示占位符，直到获取图像结算。

伪代码

bool _loaded = false;
var img = Image.network(src);
var placeholder = AssetImage(assetName)

@override
void initState() {
  super.initState();
  img.image.resolve(ImageConfiguration()).addListener((i, b) {
    if (mounted) {
      setState(() => _loaded = true);
    }
  });     
}

@override
Widget build(BuildContext context) { 
  return YourWidget(
    child: _loaded ? img : placeholder,
  );
}

Answer 2

有一个名为cached_network_image的新程序包可以满足您的需求。在这里，您可以立即设置“正在加载”图像和“错误”图像。

颤动库，用于显示来自互联网的图像并将其保存在缓存目录中。 https://pub.dev/packages/cached_network_image#-readme-tab-

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

或者您可以使用自己的资产图片作为占位符，例如：

...
placeholder: (context, url) => {return Image.asset('assets/img/my_placeholder.png');},

将此添加到您程序包的pubspec.yaml文件中：

dependencies:
  cached_network_image: ^1.1.1

并输入您的飞镖代码：

import 'package:cached_network_image/cached_network_image.dart';

Answer 3

问题：

如果Image由于任何原因未能成功加载，Image.Network没有提供任何功能来显示错误的小部件。这意味着您的URL应该始终正确吗？

Flutter小组于2020年1月13日（https://www.youtube.com/watch?v=7oIAs-0G4mw）上传了有关Image Widget的新视频，但他们仍未提供任何解决方案。我们希望Flutter小组能尽快解决此问题。

解决方案：您可以使用提供大量功能来从URL加载图像的缓存的网络图像。要了解有关缓存的网络映像的更多信息，请访问：

https://pub.dev/packages/cached_network_image

包装的样品代码：

CachedNetworkImage(   
imageUrl: "http://via.placeholder.com/200x150",  
imageBuilder: 
(context, imageProvider) => 
    Container(
     decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
     ),   
    ),   
 placeholder: (context, url) => 
   CircularProgressIndicator(),  
 errorWidget: (context, url, error) 
  => Icon(Icons.error),
),

Answer 4

您可以使用小部件官方文档中指定的loadingBuilder和erroBuilder属性：

               Image.network(
                  'https://example.com/image.jpg',
                  errorBuilder: (context, error, stackTrace) {
                    print(error); //do something
                  },
                  loadingBuilder: (BuildContext context, Widget child,
                      ImageChunkEvent loadingProgress) {
                    if (loadingProgress == null) return child;
                    return Center(
                      child: CircularProgressIndicator(
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded /
                                loadingProgress.expectedTotalBytes
                            : null,
                      ),
                    );
                  },
                ),

https://api.flutter.dev/flutter/widgets/Image/loadingBuilder.html https://api.flutter.dev/flutter/widgets/ImageErrorWidgetBuilder.html

Answer 5

您可以使用FadeInImage.assetNetwork

status = serializers.SerializerMethodField("get_status_as_char")

def get_status_as_char(self, obj):
   return  obj.get_status_display()

和pubspec.yaml

中

 child: new Container(
      child: FadeInImage.assetNetwork(
          placeholder: 'place_holder.jpg',
          image:url
      )
  )

Flutter - 失败时默认图像到Image.network

5 个答案: