djangoflutterdjango-rest-framework

Flutter Failed to detect image file format using the file header. Image source: encoded image bytes


I have a django server that has media served by nginx, I'm trying to load the media into my flutter app:

Image.network(
              valueOrDefault<String>(
                  FFAppState().user.photo,
                       'https://stpeterlibrary.crabdance.com/static/images/LOGO%201.png',
              )

The static images from the same site load just fine but the network images don't load at all, and give me this error:

Failed to detect image file format using the file header.
File header was [0x3c 0x21 0x44 0x4f 0x43 0x54 0x59 0x50 0x45 0x20].
Image source: encoded image bytes

the static file at images/LOGO%201.png is shown before the page loads the photos, then if the photo is null it shows the same error even though it was working. I think the error is related to the widget that is loading the image

Padding(
          padding: EdgeInsetsDirectional.fromSTEB(16.0, 16.0, 16.0, 16.0),
          child: InkWell(
            splashColor: Colors.transparent,
            focusColor: Colors.transparent,
            hoverColor: Colors.transparent,
            highlightColor: Colors.transparent,
            onTap: () async {
              await Navigator.push(
                context,
                PageTransition(
                  type: PageTransitionType.fade,
                  child: FlutterFlowExpandedImageView(
                    image: Image.network(
                      valueOrDefault<String>(
                        FFAppState().user.photo,
                        'https://stpeterlibrary.crabdance.com/static/images/LOGO%201.png',
                      ),
                      fit: BoxFit.contain,
                    ),
                    allowRotation: false,
                    tag: valueOrDefault<String>(
                      FFAppState().user.photo,
                      'https://stpeterlibrary.crabdance.com/static/images/LOGO%201.png',
                    ),
                    useHeroAnimation: true,
                  ),
                ),
              );
            },
            child: Hero(
              tag: valueOrDefault<String>(
                FFAppState().user.photo,
                'https://stpeterlibrary.crabdance.com/static/images/LOGO%201.png',
              ),
              transitionOnUserGestures: true,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12.0),
                child: Image.network(
                  valueOrDefault<String>(
                    FFAppState().user.photo,
                    'https://stpeterlibrary.crabdance.com/static/images/LOGO%201.png',
                  ),
                  width: MediaQuery.of(context).size.width * 1.0,
                  height: 230.0,
                  fit: BoxFit.contain,
                ),
              ),
            ),
          ),
        ),

Solution

  • The problem was that my API would provide the image link in this form:

    stpeterlibrary.crabdance.com/media/media_file.jpg
    

    This made an error somehow with the Image.network(url), and by adding https://

    https://stpeterlibrary.crabdance.com/media/media_file.jpg
    

    It worked.