Tengo un backend basado en NodeJS y uso mongodb como base de datos. Las imágenes con el nombre de campo foto se guardan como búfer de tipo de objeto. Envié con éxito imágenes desde la aplicación utilizando datos de formulario, pero no puedo mostrar la imagen en la interfaz.
Esta es la función utilizada para obtener los datos de la API
Future<User> userWithId() async { User result; try { final response = await http.get( 'api link', headers: <String, String>{ 'Authorization': 'Bearer $token', }, ); if (response.statusCode == 200) { result = User.fromJson(jsonDecode(response.body)); } } catch (e) { print(e.toString()); } return result; }Esta es la función fromJson de la clase Usuario. El campo de foto aquí devuelve la imagen como búfer.
factory User.fromJson(Map<String, dynamic> json) { return User( id: json['_id'] as String ?? "", email: json['email'] as String ?? "", // profilePhoto: json["photo"] ?? null, // profilePhoto: base64.encode(jsonDecode(json["photo"])) ?? null, ); }puede usar el método base64Decode de dart:convert
almacene su imagen binaria en formato de cadena:
factory User.fromJson(Map<String, dynamic> json) { return User( ... profilePhoto: json["photo"] ?? null, ... ); }y use el siguiente código en la interfaz de usuario:
Image.memory(base64Decode(user.profilePhoto))además, no olvide agregar una declaración if para verificar si la foto es nula o no
Espero eso ayude
json['foto']['datos']['datos']; Al hacer esto, obtiene este error List' no es un subtipo de tipo 'String'. Entonces puede ser que su tipo de devolución para profilePhoto sea String. Cámbielo a dinámico y vuelva a intentarlo.
Gracias al excelente artículo a continuación que explica sobre los bytes en dart, puede convertir sus datos de respuesta, que son como una lista de enteros, al tipo de datos Uint8List y pasarlos a Image.memory para representar la imagen.
Image.memory(Uint8List.fromList(// pass image data array here));https://medium.com/flutter-community/trabajando-con-bytes-en-dart-6ece83455721