Flutter调用Odoo 17 API获取图片后Image.network解码失败

1. 先修正代码语法错误 #

你代码里的headers写法存在语法问题，不是合法的Map格式，这会导致授权头无法正确携带，请求返回非图片数据从而引发解码失败。修正后的代码：

ClipOval(
  child: Image.network(
    employee.image!,
    fit: BoxFit.cover,
    headers: {'Authorization': 'Bearer $token'}, // 改为正确的Map结构，移除多余逗号
    errorBuilder: (context, error, stackTrace) =>
       const ClipOval(
           child: Icon(Icons.person),
       ),
  ),
)

2. 分场景处理Odoo图片返回格式 #

如果修正语法后仍无法显示，需要根据Odoo返回的图片类型调整实现方式：

场景A：employee.image是返回二进制图片的API接口

Image.network更适配直接的图片资源URL，对于返回二进制数据的API接口，建议手动发起请求获取字节流后用Image.memory显示：

// 在State组件中实现
Uint8List? _imageBytes;

@override
void initState() {
  super.initState();
  _loadEmployeeImage();
}

Future<void> _loadEmployeeImage() async {
  try {
    final response = await http.get(
      Uri.parse(employee.image!),
      headers: {'Authorization': 'Bearer $token'},
    );
    if (response.statusCode == 200) {
      setState(() => _imageBytes = response.bodyBytes);
    }
  } catch (e) {
    debugPrint('图片加载失败: $e');
  }
}

// 构建UI
ClipOval(
  child: _imageBytes != null
      ? Image.memory(_imageBytes!, fit: BoxFit.cover)
      : const ClipOval(child: Icon(Icons.person)),
)

场景B：employee.image是Base64编码字符串

如果Odoo返回的是Base64格式的图片数据（通常带data:image/xxx;base64,前缀），需要解码后再显示：

import 'dart:convert';

// 解码函数
Uint8List _decodeBase64(String base64Str) {
  final cleanStr = base64Str.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');
  return base64Decode(cleanStr);
}

// 显示图片
ClipOval(
  child: Image.memory(
    _decodeBase64(employee.image!),
    fit: BoxFit.cover,
    errorBuilder: (context, error, stackTrace) =>
       const ClipOval(child: Icon(Icons.person)),
  ),
)

3. 额外排查点 #

• 确认Flutter中使用的token与Postman完全一致，没有过期或拼写错误
• 打印请求返回的内容，检查是否是正确的图片二进制数据，还是授权失败的JSON错误信息

内容的提问来源于stack exchange，提问作者Ardabily