CODEWITHSUNDEEP
imageflutterdartblob
aravind athreya
aravind athreya

Reputation: 1

Not able to display blob as image in flutter

I'm trying to display an image stored as blob in flutter. I'm using a PHP API to get the image and send it as a base64 string. When the image builds, there is an error that says Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
Running an xampp server. PHP APIs. Flutter application run using android studio emulator

I am able to display the image on a webpage using a HTML img tag.

Image.memory(base64Decode(imagebase64string));

I expect the image to be shown on the screen Error says

Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.

Upvotes: 0

Views: 2061

Answers (2)

Gábor
Gábor

Reputation: 10274

Decode it back to a byte array from base64 and use this from dart.ui:

final codec = await ui.instantiateImageCodec(data);
final frame = await codec.getNextFrame();
return frame.image;

Or even simpler, from package:flutter/widgets.dart:

return decodeImageFromList(data);

Upvotes: 0

Spatz
Spatz

Reputation: 20158

You have to remove base64 header manualy:

    final stripped =
        imagebase64string.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');
    setState((){
      data = base64.decode(stripped);
    });

Then you can use data with Image.memory.

Image.memory(data)

Upvotes: 1

Related Questions