CODEWITHSUNDEEP
flutterimageflutter-webngrok
Muneeb Ahmad
Muneeb Ahmad

Reputation: 109

Flutter: Exception: Invalid image data: Failed to decode image while loading image ( over ngrok )

I have uploaded an image through my flutter web application to my node-js backend. the file is uploaded fine and I can view it in VS code. I have "ngrok" running so I can connect with my flutter mobile application. but when I try and load the image in the mobile application this is what I get.

E/FlutterJNI(24257): Failed to decode image
E/FlutterJNI(24257): android.graphics.ImageDecoder$DecodeException: Failed to create image decoder with message 'unimplemented'Input contained an error.
E/FlutterJNI(24257):    at android.graphics.ImageDecoder.nCreate(Native Method)
E/FlutterJNI(24257):    at android.graphics.ImageDecoder.access$200(ImageDecoder.java:173)
E/FlutterJNI(24257):    at android.graphics.ImageDecoder$ByteBufferSource.createImageDecoder(ImageDecoder.java:250)
E/FlutterJNI(24257):    at android.graphics.ImageDecoder.decodeBitmapImpl(ImageDecoder.java:1862)
E/FlutterJNI(24257):    at android.graphics.ImageDecoder.decodeBitmap(ImageDecoder.java:1855)
E/FlutterJNI(24257):    at io.flutter.embedding.engine.FlutterJNI.decodeImage(FlutterJNI.java:524)

════════ Exception caught by image resource service ════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data

When the exception was thrown, this was the stack
#0      _futurize (dart:ui/painting.dart:5718:5)
#1      ImageDescriptor.encoded (dart:ui/painting.dart:5574:12)
#2      instantiateImageCodec (dart:ui/painting.dart:2056:60)
<asynchronous suspension>
Image provider: NetworkImage("https://ff8c-119-153-136-128.ngrok.io/uploads\banners\1660405360606-MicrosoftTeams-image.png", scale: 1.0)
Image key: NetworkImage("https://ff8c-119-153-136-128.ngrok.io/uploads\banners\1660405360606-MicrosoftTeams-image.png", scale: 1.

Although if I open the image the URL directly inside the browser, it loads fine. P.S. I am uploading the image from the web app in bytes form using the file picker package. This is the code to load the image:

CachedNetworkImage(
    imageUrl: baseURL + banner.imageUrl!,
    height: 120.h,
    width: double.infinity,
    fit: BoxFit.cover,
    progressIndicatorBuilder: (context, str, progress) {
         return SizedBox(
         height: 120.h,
         child: const Center(
              child: CircularProgressIndicator.adaptive(),
         ),
        );
     },
),

I can't verify if the problem is because of ngrok or because the file is uploaded in bytes form.

Upvotes: 1

Views: 5035

Answers (2)

bibek gyawali
bibek gyawali

Reputation: 1

ngrok gives warning page while accessing ngrok through flutter and no image is loaded.

Upvotes: 0

Muneeb Ahmad
Muneeb Ahmad

Reputation: 109

Turns out, that it's the backward slash in the URL that is the problem. If I open the URL in the browser it automatically replaces "" with "/". But it doesn't happen in Flutter when loading the image.

Upvotes: 3

Related Questions