Flutter – Standardbild zu Image.network, wenn es fehlschlägt

Gibt es eine Möglichkeit, Ausnahmen zu steuern, die von Image.network() gestartet werden, damit Sie ein Standard-AssetImage bereitstellen können?

Es hängt von Ihrem Anwendungsfall ab, aber eine Möglichkeit, dies zu tun, ist die Verwendung FadeInImage die eine Eigenschaft von hat img für das Bild, das geladen werden soll, und placeholdernaja, für den Platzhalter

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

Sie können auch zuhören, bis das Bild geladen ist, und selbst einen Platzhalter anzeigen, bis das Abrufen des Bilds aufgelöst ist.

Pseudo-Code

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

Sie können mit FadeInImage.assetNetwork tun

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

und in pubspec.yaml

  assets:
  - assets/place_holder.jpg

Es gibt ein neues Paket namens cached_network_image was tut, was Sie brauchen. Hier können Sie direkt ein „Loading“-Bild und ein „Error“-Bild einstellen.

Eine Flutter-Bibliothek, um Bilder aus dem Internet anzuzeigen und im Cache-Verzeichnis zu halten.
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),
     ),

oder Sie können beispielsweise Ihr eigenes Asset-Bild als Platzhalter verwenden:

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

Fügen Sie dies der Datei pubspec.yaml Ihres Pakets hinzu:

dependencies:
  cached_network_image: ^1.1.1

und importieren Sie Ihren Dart-Code:

import 'package:cached_network_image/cached_network_image.dart';

Sie können die Eigenschaften loadingBuilder und erroBuilder wie in der offiziellen Widget-Dokumentation angegeben verwenden:

               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

Problem:

Image.Network bietet keine Funktion zum Anzeigen eines Fehler-Widgets, wenn das Bild aus irgendeinem Grund nicht erfolgreich geladen wurde. Das bedeutet, dass Ihre URL immer korrekt sein sollte?

Das Flutter-Team hat am 13.01.2020 ein neues Video über Image Widget hochgeladen (https://www.youtube.com/watch?v=7oIAs-0G4mw), aber sie haben immer noch keine Lösung bereitgestellt. Wir hoffen, dass das Flutter-Team dieses Problem bald lösen wird.

Lösung: Sie können ein zwischengespeichertes Netzwerkbild verwenden, das viele Features/Funktionalitäten bietet, um ein Bild von einer URL zu laden. Um mehr über gecachte Netzwerkbilder zu erfahren, besuchen Sie bitte:

https://pub.dev/packages/cached_network_image

Beispielcode des Pakets:

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

Ich habe die Möglichkeit gefunden, wie Sie dies verwenden können

     SizedBox(
              height: 50,
              width: 50,
              child: FadeInImage(
                  height: 50,
                  width: 50,
            fadeInDuration: const Duration(milliseconds: 500),
                  fadeInCurve: Curves.easeInExpo,
                  fadeOutCurve: Curves.easeOutExpo,
                  placeholder: AssetImage("assets/images/common_screen/ic_default_image.jpg"),
                  image: NetworkImage(imageURL
                  ),
                  imageErrorBuilder: (context, error, stackTrace) {
                      return Container(child: Image.asset("assets/images/common_screen/ic_default_image.jpg"));
                  },
                  fit: BoxFit.cover),
            )