image - How to Show an Local image till the NetworkImage() Loads Up in flutter?

Question

            new CircleAvatar(
                              backgroundColor: Colors.black87,
                              backgroundImage: new NetworkImage(url),
                              radius: 45.0,
                            )

I Want to show a local image in CircleAvatar until the NetworkImage fully loads from the internet.

score 19 · Accepted Answer

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

注意：ClipOval如果您经常使用它可能会很昂贵，因此请谨慎使用。

score 15 · Accepted Answer

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

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

score 13 · Accepted Answer

使用 a StateflWidget，您可以将 a 添加listener到ImageStream并覆盖initState以触发本地图像与完全加载时从 Internet 获得的图像之间的替换。

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

  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,
          ),)
        )
    );
  }
}

score 5 · Accepted Answer

解决问题的两种方法

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,
  )

score 3 · Accepted Answer

您可以使用FadeInImage。

使用资产中的占位符

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

使用内存中的占位符

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

加载大图像时，显示后备资产！

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

https://github.com/FaisalAbid/pluto

score 2 · Accepted Answer

我开发了一个名为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
)

score 1 · Accepted Answer

为此，您可以使用缓存网络映像包。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,
    ),
  ),
),

score 0 · Accepted Answer

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

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

image - How to Show an Local image till the NetworkImage() Loads Up in flutter?

10 回答 10

Related

Reference