I'm trying to send image data from my nodejs express server to flutter. I receive the image data as a buffer from another server Appwrite
and decode it to base64 string then send the string which upon receiving it on my flutter app, i try to decode it and display the image but displaying fails with error message
Server side
const getPhoto = async function(req, res){
var data = await api.getStorage().getFilePreview('61579ced0');
console.log("raw data -------------------------------\n")
console.log(data);
var base64 = data.toString('base64');
console.log("base 64 data -------------------------------\n")
console.log(base64);
var obj = new Object();
obj['data'] = base64;
res.send(obj);
};
Raw data format
below is the output of console.log(data);
in encoded form(base 64)
below is the output of var base64 = data.toString('base64');
Flutter side
model
@JsonSerializable()
class ImageResponse {
String data;
ImageResponse(this.data);
factory ImageResponse.fromJson(Map<String, dynamic> json) =>
_$ImageResponseFromJson(json);
Map<String, dynamic> toJson() => _$ImageResponseToJson(this);
Uint8List getImage() {
return base64Decode(data);
}
}
displaying the image
FutureBuilder<Uint8List>(
future: bloc.getPhoto(),
builder: (BuildContext context,
AsyncSnapshot<Uint8List> snapshot) {
if (snapshot.hasData) {
return Image.memory(snapshot.data);
} else {
return FittedBox(
fit: BoxFit.contain,
child: Image.asset(
'assets/images/placeholder.jpg',
),
);
}
})