web-dev-qa-db-fra.com

Flutter - Image par défaut sur Image.network en cas d'échec

Existe-t-il un moyen de contrôler les exceptions lancées par Image.network () afin de lui fournir une AssetImage par défaut?

androidasynchronousnetworkingdartflutter
9
Jesús Martín

Cela dépend de votre cas d'utilisation, mais une façon de le faire est d'utiliser FadeInImage qui a une propriété img pour l'image qui est destinée à charger, et placeholder, eh bien, pour l'espace réservé

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

Vous pouvez également écouter jusqu'à ce que l'image soit chargée et afficher vous-même un espace réservé jusqu'à la résolution de la récupération de l'image.

pseudo-code 

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

-----------> go to initState()  

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

-----------> go where you build your widget 
        _loaded? img:placeholder
4
aziza

Vous pouvez le faire avec FadeInImage.assetNetwork

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

et dans pubspec.yaml

  assets:
  - assets/place_holder.jpgT
0
Lay Leangsros

Problème:

Image.Network ne fournit aucune fonctionnalité/fonctionnalité pour afficher le widget d'erreur si l'image n'est pas chargée avec succès pour une raison quelconque. Cela signifie que votre URL doit toujours être correcte?

L'équipe Flutter a téléchargé une nouvelle vidéo sur Image Widget le 13-01-2020 ( https://www.youtube.com/watch?v=7oIAs-0G4mw ) mais elle n'a toujours pas fourni de solution. Nous espérons que l'équipe Flutter résoudra bientôt ce problème.

Solution: vous pouvez utiliser une image réseau mise en cache qui fournit de nombreuses fonctionnalités/fonctionnalités pour charger l'image à partir d'une URL. Pour en savoir plus sur l'image du réseau mis en cache, veuillez visiter:

https://pub.dev/packages/cached_network_image

Exemple de code de package:

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),
),
0
Wajid khan