在接收到完整的头部之前连接已关闭

Question

我是flutter的新手，正在开发一个通过Image.network展示大量图片的应用。一切都在运行，但是经常并且完全随机地（即使我很慢地滚动），我会遇到这个错误：

I/flutter (10990): EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE 
I/flutter (10990): The following HttpException was thrown resolving an image codec:
I/flutter (10990): Connection closed before full header was received, uri =
I/flutter (10990): http://www.attilofficina.altervista.org/phpbackend/JOB/000004/mockup/000004_017.jpg
I/flutter (10990): 
I/flutter (10990): When the exception was thrown, this was the stack:
I/flutter (10990): #0      NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:525:41)
I/flutter (10990): <asynchronous suspension>.

这些图像被跳过了！

有没有一种方法来处理此错误并强制重新加载那些缺失的图像？ 提前致谢。

我也尝试过使用分页的listView，每次最少加载页面数，但这并不能解决问题，错误总是随机返回。

在这里是flutter doctor -v的结果：

[√] Flutter (Channel stable, v1.7.8+hotfix.3, on Microsoft Windows [Versione 10.0.17134.885], locale it-IT)
    • Flutter version 1.7.8+hotfix.3 at C:\src\flutter
    • Framework revision b712a172f9 (7 days ago), 2019-07-09 13:14:38 -0700
    • Engine revision 54ad777fd2
    • Dart version 2.4.0


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\Mussa.DESKTOP-HFFLS0G\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[√] Android Studio (version 3.4)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 37.0.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[√] VS Code (version 1.36.0)
    • VS Code at C:\Users\Mussa.DESKTOP-HFFLS0G\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.2.0

[√] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android P (API 27) (emulator)

• No issues found!

- attila

---

你能添加 flutter doctor -v 的输出吗？ - 10101010

当然可以，我已经添加了它。 - attila

Answer 1

这可能是因为小部件在小部件树中被重用，从而打断了HTTP请求。您可以在FutureBuilder或Image小部件中使用关键字。

child: FutureBuilder<File>(
  key: ValueKey(imageUrl), // or use UniqueKey()  
  ...

- Till Friebe

---

只有valuekey对我起作用。 - roepit

你太棒了！但愿我早点回复。 - Siddharth Sogani

这个解决方案不起作用。 - minato

Answer 2

我曾经遇到了完全相同的问题，但一直无法找到问题的原因。 最终我使用了Cached network image库，解决了我的图片加载问题。

- Jakub

---

特别感谢Jakub，同时对我来说，缓存网络图像库解决了我的图像加载问题，现在一切都正常工作了！太棒了！ - attila

我使用了这个小技巧 :) https://github.com/flutter/flutter/issues/25107#issuecomment-655655719 - Galeen

这个库也有同样的问题，我还没能找出根本原因。 - egaga

相同的问题也存在于Cached Network Image。 - Harsh Kumar

不知道为什么这个被接受为答案。它不能正常工作。@Till 的回答是正确的。 - Siddharth Sogani

Answer 3

尽管GitHub上的问题已关闭，但该问题仍然存在：

该错误实际上是随机出现的，我们无法知道何时会出现错误。

我解决此问题的方法是使用FadeInImage来了解请求图像何时出现错误 Connection closed before full header was received, URI = ，并在 imageErrorBuilder 方法中处理它。

我创建了一个名为UrlImage的新小部件：

FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: imageURL,
      imageErrorBuilder: (context, error, stacktrace) { // Handle Error for the 1st time
        return FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: imageURL,
          imageErrorBuilder: (context, error, stacktrace) { // Handle Error for the 2nd time
            return FadeInImage.memoryNetwork(
              fit: BoxFit.cover,
              placeholder: kTransparentImage,
              image: imageURL,
              imageErrorBuilder: (context, error, stacktrace) { // Handle Error for the 3rd time to return text
                return Center(child: Text('Image Not Available'));
              },
            );
          },
        );

如果需要了解更多小部件的详细信息，您可以在我的 Gist 中查看下面的代码: https://gist.github.com/Robihamanto/5e0dd358d4da90603683ca74430aff8a

- Robihamanto

---

不知怎么的，这感觉就像是在伤口（漏洞）上再贴了一层创可贴，问题还在... - Christian X

Answer 4

截至目前，这个问题仍然存在。我尝试使用 CachedNetworkImage 包，结果相同。最后，我使用了 extended_image，它的效果非常好。请看这里的插件-https://pub.dev/packages/extended_image 我已经完成了将我的应用程序移植到使用此包的工作。加载、错误和成功事件也可以像 CachedNetworkImage 一样轻松处理。

- Hanly Nadackal