Flutter中如何转换API返回的图片以适配CachedNetworkImage

你的API返回的是PNG二进制图片数据，但当前代码将其转为String返回，这会导致图片数据损坏（二进制转字符串会丢失非UTF-8兼容的字节）。需要按以下步骤修改：

1. 修改API请求方法，返回Uint8List类型 #

二进制图片数据必须以字节数组（Uint8List）的形式传递，不能转成String。调整你的接口方法：

@override
Future<ResponceT<Uint8List>> getProfileImage(int version) async {
  // 如果使用dio等网络库，需设置返回字节类型，比如dio的responseType: ResponseType.bytes
  var response = await get(ApiRoutes.getImage);
  if (!response.isSuccess) return response.copy<Uint8List>();
  // 确保response.data是Uint8List，若网络库默认返回String，需先配置返回字节
  return ResponceT.success<Uint8List>(response.data as Uint8List);
}

注意：如果你的网络请求库（如dio）默认将响应转为String，需在请求时指定返回字节类型，示例（dio）：

var response = await dio.get(ApiRoutes.getImage, responseType: ResponseType.bytes);

2. 使用CachedNetworkImage加载二进制数据 #

CachedNetworkImage支持通过imageProvider参数加载本地字节数据，结合cacheKey实现缓存：

// 先获取图片字节数据
final imageResponse = await api.getProfileImage(1);

if (imageResponse.isSuccess) {
  CachedNetworkImage(
    imageProvider: MemoryImage(imageResponse.data!),
    cacheKey: 'profile_image_v1', // 用版本号作为缓存键，版本更新时自动刷新缓存
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error_outline),
  );
}

MemoryImage会将字节数组转为图片，cacheKey让CachedNetworkImage把这张图片缓存起来，下次加载时直接从缓存读取。

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