【问题标题】:How to Show an Local image till the NetworkImage() Loads Up in flutter?如何在 NetworkImage() 加载之前显示本地图像?
【发布时间】:2018-03-19 16:16:14
【问题描述】:
            new CircleAvatar(
                              backgroundColor: Colors.black87,
                              backgroundImage: new NetworkImage(url),
                              radius: 45.0,
                            )

我想在CircleAvatar 中显示本地图像,直到NetworkImage 从互联网完全加载。

【问题讨论】:

    标签: image flutter dart load networkimageview


    【解决方案1】:

    您可能想尝试将FadeInImage 包裹在ClipOval 中。 FadeInImage 提供了一个 placeholder 属性,您可以在加载网络图像时使用。

    注意:ClipOval 经常使用可能会很昂贵,因此请谨慎使用。

    【讨论】:

    • 在加载“NetworkImage”之前如何使用“NetworkImage”的占位符?任何例子都将受到高度赞赏。谢谢
    【解决方案2】:

    现在有一个新的官方小部件!

    首先,在项目根目录下创建一个名为assets的文件夹。

    然后,提到pubspec.yaml文件中的文件夹(也可以在项目根目录中找到):

    flutter:
      uses-material-design: true
      assets:
        - assets/
    

    你可以放一张图片,比如把这个写成./assets/loading.gif

    (如果您更改了 assets 文件夹中的文件,热重载将不起作用。请确保完全重新启动应用程序。)

    现在可以参考代码中的加载文件:

    FadeInImage.assetNetwork(
      placeholder: 'assets/loading.gif',
      image: 'https://github.com/flutter/website/blob/master/src/_includes/code/layout/lakes/images/lake.jpg?raw=true',
    );
    

    更多详情:https://flutter.io/docs/cookbook/images/fading-in-images#from-asset-bundle

    【讨论】:

    • FadeInImage 不能作为图像传递给 CircleAvatar
    • 我的小部件需要“imageProvider”。请建议我如何使用您的 FadeInImage 和网络图像解决方案来显示图像?谢谢。
    • 我正在使用pub.dev/packages/photo_view 提供的 photo_view 包。我的代码为:PhotoView(imageProvider: NetworkImage(widget.photoPath.toString(), ),),请建议在加载网络图像之前如何使用占位符图像。非常感谢。
    【解决方案3】:

    使用StateflWidget,您可以将listener 添加到ImageStream 并覆盖initState 以触发本地图像与完全加载时从互联网获取的图像之间的替换。

    我使用了高分辨率图像来显示加载时间:

      var _loadImage = new AssetImage(
          'assets/img/basic2-090_loader_loading-512.png');
      var _myEarth = new NetworkImage(
          "http://qige87.com/data/out/73/wp-image-144183272.png");
      bool _checkLoaded = true;
    
      @override
      void initState() {
        _myEarth.resolve(new ImageConfiguration()).addListener((_, __) {
          if (mounted) {
            setState(() {
              _checkLoaded = false;
            });
          }
        });
      }
    
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            body: new Center(child: new Container(
              decoration: new BoxDecoration(shape: BoxShape.circle,),
              height: 80.0,
              width: 80.0,
              child: new CircleAvatar(
                backgroundColor: Theme
                    .of(context)
                    .scaffoldBackgroundColor,
                backgroundImage: _checkLoaded ? _loadImage : _myEarth,
              ),)
            )
        );
      }
    }
    

    【讨论】:

    • BoxDecoration 没有 width 和 height 属性
    • 这是在 Container 小部件上,而不是 BoxDecoration
    • 这解决了我的问题,这是我在加载图像时需要知道的关键。
    • 如何显示“CircularProgressIndicator”而不是 backgroundImage _loadImage。请建议。谢谢
    【解决方案4】:

    解决问题的两种方法

    1) 使用 Image.network : 如果您想在图像加载时显示进度条、simmer 或任何其他小部件。

      Image.network(
          "URL",
          fit: BoxFit.cover,
          loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent loadingProgress) {
            if (loadingProgress == null) {
              return child;
            }else {
              return Center(
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
                ),
              );
            }
          },       
      )
    



    2) 使用 FadeInImage :如果你想在网络图像加载时显示本地图像

     FadeInImage.assetNetwork( 
        image:"URL",
        placeholder:"assets/loading.png" // your assets image path
        fit: BoxFit.cover,
      )
    

    【讨论】:

    • 我的小部件需要“imageProvider”。请建议我如何使用您的解决方案?谢谢。
    • 我正在使用pub.dev/packages/photo_view 提供的 photo_view 包。我的代码为:PhotoView(imageProvider: NetworkImage(widget.photoPath.toString(), ),),请建议在加载网络图像之前如何使用占位符图像。非常感谢。
    【解决方案5】:

    在加载大图像时,显示备用资源!

     new PlutoImage.networkWithPlaceholder("http://68.media.tumblr.com/f7e2e01128ca8eb2b9436aa3eb2a0a33/tumblr_ogwlnpSpcU1sikc68o1_1280.png", new Image.asset("assets/placeholder.png"));
    

    https://github.com/FaisalAbid/pluto

    【讨论】:

      【解决方案6】:

      您可以使用 FadeInImage

      使用资产中的占位符

      FadeInImage.assetNetwork(
                                    placeholder: "assets/images/image1.png",
                                    image:"URL"
                                      ),
      

      使用内存中的占位符

      FadeInImage.memoryNetwork(
                                            placeholder: localImageBytes,
                                            image:"URL"
                                          ),
      

      【讨论】:

      • 我正在使用pub.dev/packages/photo_view 提供的 photo_view 包。我的代码为:PhotoView(imageProvider: NetworkImage(widget.photoPath.toString(), ),),请建议在加载网络图像之前如何使用占位符图像。非常感谢。
      • @Kamlesh 请创建一个新问题
      • 感谢 Abir,我已经解决了这个问题,另一个 stackoverflow 用户分享了解决这个问题的最佳解决方案。
      【解决方案7】:

      您也可以使用frameBuilder 属性。好消息:您可以在此处实现自定义占位符小部件。

      Image.network('https://example.com/my-image',
        height: 100,
        frameBuilder: (context, child, frame, _) {
          if (frame == null) {
            // fallback to placeholder
            return MyPlaceholderWidget();
          }
          return child;
        }
      )
      

      【讨论】:

        【解决方案8】:

        我开发了一个名为flutter_url_image_load_fail 的包来定义加载加载失败小部件:

        LoadImageFromUrl(
            'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png', //Image URL to load
            (image) => image, //What widget returns when the image is loaded successfully
            () => Text('Loading...'), //What widget returns when the image is loading
            (IRetryLoadImage retryLoadImage, code , message){ //What widget returns when the image failed to load
                return RaisedButton(
                    child: Text('Try Again'),
                    onPressed: (){
                        retryLoadImage.retryLoadImage(); //Call this method to retry load the image when it failed to load
                    },
                );
            },
            requestTimeout: Duration(seconds: 5) //Optionally set the timeout
        )
        

        【讨论】:

          【解决方案9】:

          为此,您可以使用Cached network image 包。 CachedNetworkImage 可以直接使用,也可以通过 ImageProvider 使用

          像这样创建一个 CircleAvatar

          CircleAvatar(
            radius: 50,
            foregroundColor: Colors.transparent,
            backgroundColor: appThemeColor.shade50,
            child: CachedNetworkImage(
              imageUrl: UserInfoData.instance.getUserImageUrl(),
              placeholder: (context, url) => CupertinoActivityIndicator(),
              imageBuilder: (context, image) => CircleAvatar(
                backgroundImage: image,
                radius: 40,
              ),
          
              errorWidget: (context, url, error) => CircleAvatar(
                backgroundColor: Colors.grey,
                child: userProfileAvatarPlaceholder,
                radius: 40,
              ),
            ),
          ),
          

          【讨论】:

          • 我正在使用pub.dev/packages/photo_view 提供的 photo_view 包。我的代码为:PhotoView(imageProvider: NetworkImage(widget.photoPath.toString(), ),),请建议在加载网络图像之前如何使用占位符图像。非常感谢。
          【解决方案10】:

          有一个新的cached_network_image 包,其中包含“正在加载”和“错误”图像。连同自动图像缓存。 https://stackoverflow.com/a/57493334/5502121

          您可以将任何您想要的内容设置为占位符,例如从您的资产中使用Image.asset('assets/images/my_placeholder.png')

          【讨论】:

            猜你喜欢
            • 2019-12-06
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2016-06-29
            • 1970-01-01
            相关资源
            最近更新 更多