pulling images like contact avatar

[abaysevi]

when i tried to pull a contact avatar to the contacts page it is giving out a blank pic

like this and when i tried to access the link for example
http://localhost:8069/web/image?model=res.partner&field=image_128&id=23&unique=20240223035456
in browser it shows

like this maybe because i have not logged in
so i logged in to odoo in browser

and then when i open the link

i got this

yeah i will share the code

`import 'package:flutter/material.dart';
import 'package:odoo_rpc/odoo_rpc.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Odoo Contacts App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(),
);
}
}

class LoginPage extends StatefulWidget {
@OverRide
_LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State {
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final OdooClient odoo = OdooClient('http://172.18.109.2:8069');

Future _login() async {
try {
await odoo.authenticate(
'test', emailController.text, passwordController.text);
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => HomePage(odoo: odoo)),
);
} catch (e) {
print('Login failed: $e');
// Handle login failure, show an error message, etc.
}
}

@OverRide
void dispose() {
emailController.dispose();
passwordController.dispose();
odoo.close();
super.dispose();
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: emailController,
decoration: InputDecoration(labelText: 'Email'),
),
TextField(
controller: passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
SizedBox(height: 16.0),
ElevatedButton(
onPressed: _login,
child: Text('Login'),
),
],
),
),
);
}
}

class HomePage extends StatelessWidget {
final OdooClient odoo;

HomePage({required this.odoo});

Future fetchContacts() {
return odoo.callKw({
'model': 'res.partner',
'method': 'search_read',
'args': [],
'kwargs': {
'context': {'bin_size': true},
'domain': [],
'fields': ['id', 'name', 'email', '__last_update', 'image_128'],
'limit': 80,
},
});
}

Widget buildListItem(Map<String, dynamic> record) {
print(record);
var unique = record['__last_update'] as String;
unique = unique.replaceAll(RegExp(r'[^0-9]'), '');
print(odoo.baseURL);
final avatarUrl =
'${odoo.baseURL}/web/image?model=res.partner&field=image_128&id=${record["id"]}&unique=$unique';
print(avatarUrl);
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(avatarUrl),
backgroundColor: Colors.black,
),
title: Text(record['name']),
subtitle: Text(record['email'] is String ? record['email'] : ''),
);
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Contacts'),
// actions: [
// IconButton(
// onPressed: () {
// // Log out and navigate back to the login page
// odoo.logout();
// Navigator.pop(context);
// },
// icon: Icon(Icons.logout),
// ),
// ],
),
body: Center(
child: FutureBuilder(
future: fetchContacts(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Unable to fetch data');
} else if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
final record = snapshot.data[index] as Map<String, dynamic>;
return buildListItem(record);
},
);
} else {
return Text('No data available');
}
},
),
),
);
}
}
`

[abaysevi]

also the api call i make in the code is to the odoo server running in my wsl and the flutter app is made in windows so i think both are same like the localhost:8069 is same as http://172.18.109.2:8069/

also i am able to fetch the email and contact name yeah i wanna know if there is any additional auth required for pulling image from api

[lem8r]

Hi,

You don't have to pull images. Just build image URL and pass it to network image widget. But the image(ir.attachment) must be public in order to access it. It is not so for the contacts AFAIK.
You can get image binary data via api as long as you're logged in but I don't think it is a good idea. No caching, to much data to fetch.

[abaysevi]

Hi,

You don't have to pull images. Just build image URL and pass it to network image widget. But the image(ir.attachment) must be public in order to access it. It is not so for the contacts AFAIK. You can get image binary data via api as long as you're logged in but I don't think it is a good idea. No caching, to much data to fetch.

ohhh thank you lemme see
thnak you for the response

[JourdainK]

if (image.isNotEmpty) {
return CircleAvatar(
radius: circleRadius/2-5,
backgroundImage: Image.memory(
base64Decode(image),
fit: BoxFit.cover,
).image,
);
}
return const Icon(Icons.person,color: Colors.black);
}

have you tried base64Decode ?

Image as a String (contact.getString("image_128")) then Decode ?

[abaysevi]

yess i tried base64decode also
it did not work tho

the thing is that i am using wsl for odoo and the flutter app is runnig in windows

[oussama-souidi]

i am working on a similar project and i encountered the same issue. Did you find a solution to this problem?

[abaysevi]

are u like running odoo in wsl and building app in windows ?

[BARSHA-ABHILASHA]

any solution for this i am getting same issue ......

[tarek-berkane-dzexpert]

Solution is pretty easy to get image from Odoo all you need is your session id and add it to your headers.
Example:
If you are using Image.network widget, you can try this:

 child: Image.network(
      imageUrl,
      headers: {"Cookie":"session_id= ${session_id}"},
    ),

[abaysevi]

ahha i think that is what i was looking for