Connection closed before full header was received when loading images.

[vinayakprasad96]

Hi,

I need to display a list of products and each product has an image and some details. I'm using silverlist and SliverChildBuilderDelegate for this purpose. I'm frequently getting this error on some images (few images doesn't load in the list)

" Another exception was thrown: HttpException: Connection closed before full header was received, uri = https://zoomtail-processed-images.s3.ap-south-1.amazonaws.com/raw-images/raw-W0104-005493_1.webp"

and the solution in #25107 of overriding the global httpclient doesn't work for me.

I've tried to pre cache the network image and also tried using cacheextent, but to no avail. Could you help me with this?

Thanks.

[gieroj]

I have the same problem did you found solution for it ??

edit
OK I found out that it happens only on aws s3 on normal FTP it is working as it suppose to

[vinayakprasad96]

Hi,

I didn't find any solution for it.
I had problem with non S3 images as well. Got the same error. Were you able to figure it out?

Thanks.

[gieroj]

Yes I had the same error message but I found out that it was because I use graphql in flutter and s3 that make some weird problem.
I spend 2 whole days to find out this :(

Well I am not sure why but image link that you provide did not open normally for me in the browser instead it force browser to download image.
Maybe try change it to png/jpg ??
Good luck

[vinayakprasad96]

Thanks. It's an issue with amazon aws' s3. This error occurs when I load images from S3. I'm hoping flutter team would help me with this issue because I can't use other FTPs as we use S3 for storage of images for all our applications.

[ohjs88]

The same problem occurs.

[Vitaly-V]

The same problem occurs.

[cfchris]

@vinayakprasad96 @gieroj @Vitaly-V if you found/find a solution will you please post it.

(repost from #21798)

We are building a companion application to our web-based CRM. One of the features is sms/mms. Because the information might be private, we are serving the images behind an authenticated API that redirects (302) to an S3 short term URL (5 minutes).

Anecdotally, I can say NetworkImage seems fine on conversations that only have a few images (like 2 or 3). On a conversation thread that I am using that has 9 images, frequently one or two of them will have this issue immediately. (I will get the error Connection closed before full header was received, uri = ... in the "debug console" and those images will not load.

(A coworker pointed out that if you copy the address from the error in the debug console and paste it in a browser, it loads and is valid.)

It's going to be very embarassing if randomly, sometimes, some of the images won't show up. :-(

[cfchris]

I finally stumbled on a StackOverflow that mentioned fixing this with cached_network_image package. I tried it out and it did fix the issue. It also had the added benefit of making the screens faster on subsequent views (because images are cached locally now).

So, although the issue still remains for others, I'm happy that I was forced to find CachedNetworkImage().

It was a very easy drop-in replacement for NetworkImage, here are the two places I had to change (the second being only a tiny bit more complex).

// BEFORE:
          child: ClipRRect(
            borderRadius: borderRadius,
            child: Image.network(imageUrl),
          ),
// AFTER:
          child: ClipRRect(
            borderRadius: borderRadius,
            child: CachedNetworkImage(
              imageUrl: imageUrl,
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),

// BEFORE:
            Expanded(
              child: PhotoView(
                imageProvider: NetworkImage(images[currentIndex].imageUrl),
              ),
            ),
// AFTER
            Expanded(
              child: CachedNetworkImage(
                imageUrl: images[currentIndex].imageUrl,
                imageBuilder: (context, imageProvider) =>
                    PhotoView(imageProvider: imageProvider),
              ),
            ),

[iapicca]

Hi @vinayakprasad96
does @cfchris ' solution work for you?
thank you

[vinayakprasad96]

Using a different CDN for now. Hence, closing this issue.

[gabcarneiro]

I was having the problem while consuming images from a s3 bucket.
In my case changing the request from HTTPS to HTTP worked.

[iapicca]

Could everyone who still has this problem please file a new issue with the exact description of what happens, logs and the output of flutter doctor -v.
All system setups can be slightly different, so it's always better to open new issues and reference related issues.

[hipepe]

@iapicca

This problem still exists

use Image.network

Connection closed before full header was received, uri = http://192.168.1.254/Novatek/Photo/20000105_014447A.JPG?custom=1&cmd=4001

    Widget _buildCameraPhoto(BuildContext context) {
    final size = MediaQuery.of(context).size;
    if (_isShowLoading) {
      return Container(
        height: size.height,
        width: size.width,
        child: Center(
            child: SpinKitThreeBounce(
          color: Theme.of(context).accentColor,
          size: 48,
        )),
      );
    }

    return Container(
      child: _groupFileList != null
          ? ListView.builder(
              itemCount: _groupFileList?.length,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                final keys = _groupFileList?.keys.toList();
                return _buildPhotoGroup(context, keys![index], index);
              },
            )
          : Container(),
    );
  }

  Widget _buildPhotoGroup(BuildContext context, String key, int groupIndex) {
    return Column(
      children: [
        Container(
          color: Colors.white,
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.centerLeft,
          child: Text(
            key,
            style: TextStyles.textSize16.copyWith(color: Colors.black),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 4.0),
          child: _groupFileList != null && _groupFileList![key] != null
              ? GridView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: _groupFileList![key]!.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    childAspectRatio: 1.0,
                    crossAxisSpacing: 4,
                    mainAxisSpacing: 4,
                  ),
                  itemBuilder: (BuildContext context, int index) {
                    int currentIndex = 0;
                    final List<String> keys = _groupFileList!.keys.toList();
                    for (int i = 0; i < keys.length; i++) {
                      if (keys[i].contains(key)) {
                        currentIndex += index;
                        break;
                      }
                      currentIndex += _groupFileList![keys[i]]!.length;
                    }

                    return _buildPhoto(
                      context,
                      _groupFileList![key]![index],
                      currentIndex,
                    );
                  })
              : Container(),
        ),
      ],
    );
  }

  Widget _buildPhoto(BuildContext context, CameraFile cameraFile, int index) {
    String filePath = cameraFile.file!.filePath!
        .substring(3, cameraFile.file!.filePath!.length);
    filePath = filePath.replaceAll('\\', '/');
    final url = 'http://192.168.1.254/$filePath${HttpApi.getThumbnail}';

    return Image.network(
      Uri.encodeFull(url),
      width: double.infinity,
      height: double.infinity,
      fit: BoxFit.cover,
      loadingBuilder: (BuildContext context, Widget child,
          ImageChunkEvent? loadingProgress) {
        if (loadingProgress == null) {
          return child;
        }

        return Center(
            child: SpinKitCircle(
          color: Theme.of(context).accentColor,
          size: 24,
        ));
      },
    );
  }

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-x64, locale
    zh-Hans-CN)
    • Flutter version 2.0.4 at /Users/angus/flutter
    • Framework revision b1395592de (10 days ago), 2021-04-01 14:25:01 -0700
    • Engine revision 2dce47073a
    • Dart version 2.12.2
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version
    30.0.0-rc4)
    • Android SDK at /Users/angus/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0-rc4
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 43.0.3
    • Dart plugin version 193.6015.53

[✓] VS Code (version 1.55.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (3 available)
    • M2007J22C (mobile) • qwq875q8z5em75hy • android-arm64  • Android 10 (API
      29)
    • macOS (desktop)    • macos            • darwin-x64     • macOS 11.2.3
      20D91 darwin-x64
    • Chrome (web)       • chrome           • web-javascript • Google Chrome
      89.0.4389.114
    ! Error: iPad is not connected. Xcode will continue when iPad is connected.
      (code -13)

• No issues found!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.