Flutter - изображение по умолчанию для Image.network при сбое

Есть ли способ контролировать исключения, запускаемые Image.network (), чтобы вы могли предоставить ему AssetImage по умолчанию?

Что вы подразумеваете под исключением? ]

Rémi Rousselet 11.04.2018 12:11

Ошибка, например, попытка прочитать несуществующий URL

Jesús Martín 11.04.2018 13:01
34
2
41 418
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Это зависит от вашего варианта использования, но один из способов сделать это - использовать 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,
  );
}
You can also listen until the image is loaded, говоря о ImageProvider, здесь поможет. Поскольку изображение не содержит прослушиваемого.
Rémi Rousselet 11.04.2018 13:20

Вы можете сделать с FadeInImage.assetNetwork

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

и в pubspec.yaml

  assets:
  - assets/place_holder.jpg

как обрабатывать нулевой URL-адрес с помощью FadeInImAGE ??

Md. Sulayman 14.07.2020 09:47

вы должны указать полный путь, а не только имя.

Haley Huynh 06.10.2020 22:02

Есть новый пакет под названием cached_network_image, который делает то, что вам нужно. Здесь вы можете прямо из коробки установить «загружаемое» изображение и изображение «ошибка».

A flutter library to show images from the internet and keep them in the cache directory. 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';

this: placeholder: (context, url) => {return Image.asset ('assets / img / my_placeholder.png');} вообще не работает

Kornel 27.04.2020 20:01

@Kornel попробуйте использовать (context) => Image.asset ('assets / img / my_placeholder.png'),

Yumarx Polanco 25.10.2020 03:57

Проблема:

Image.Network не предоставляет никаких функций / функций для отображения виджета ошибки, если изображение не было успешно загружено по какой-либо причине. Это означает, что ваш URL-адрес всегда должен быть правильным?

Команда Flutter загрузила новое видео о Image Widget 13.01.2020 (https://thewikihow.com/video_7oIAs-0G4mw), но до сих пор не предложила никакого решения. Мы надеемся, что команда 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),
),

Вы можете использовать свойства 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.htmlhttps://api.flutter.dev/flutter/widgets/ImageErrorWidgetBuilder.html

Другие вопросы по теме