Flutter通过API加载头像时出现‘Invalid argument(s): No host specified in URI file:///’错误的解决方法及正确显示头像方案

你遇到的这个错误，本质是传给Image.network的profilePicture值有问题——要么是空字符串，要么是个不完整的相对路径，导致Flutter把它解析成了file:///这种没有主机地址的无效URI，自然加载失败。下面一步步给你解决：

第一步：排查API返回的头像URL #

先搞清楚API给的profilePicture到底是什么值。在你的setState之前加个打印，看看具体内容：

setState(() {
  profilePicture = responseJson![0]["profilePicture"] ?? "";
  print("拿到的头像URL：$profilePicture"); // 新增这行
});

如果打印出来是空、是相对路径（比如/uploads/avatar.jpg），或者不是以http:///https://开头的，那就是问题根源。

第二步：修正API数据解析的bug #

你的Dio代码里有个容易踩的坑：Dio默认会自动解析JSON响应，不需要再用json.decode(response.toString())。之前的写法会把整个Response对象转成字符串再解码，大概率拿到错误的数据，导致profilePicture值不对。修正后的getdata方法应该是这样：

// 初始化空列表，避免空安全问题，不用问号
List<Map<String, dynamic>> responseJson = [];
String profilePicture = "";

getdata() async {
  try {
    // 用字符串拼接简化写法
    final response = await Dio().get("${BASE_API}user/getUserById/${loginUserData["id"]!}");
    
    // 处理API返回的格式：如果是列表就直接转，是单个对象就加到列表里
    if (response.data is List) {
      responseJson = List<Map<String, dynamic>>.from(response.data);
    } else if (response.data is Map) {
      // 很多API会把数据包在data字段里，比如response.data["data"]，你根据实际情况调整
      responseJson.add(Map<String, dynamic>.from(response.data));
    }
    
    setState(() {
      // 用??给个默认空值，避免null
      profilePicture = responseJson[0]["profilePicture"] ?? "";
      print("头像URL：$profilePicture");
    });
  } catch (e) {
    print("请求用户数据出错：$e");
  }
}

第三步：给头像加错误处理和默认兜底 #

就算API返回的URL有问题，也不能让页面报错，得给个默认头像。修改你的CircleAvatar代码，先判断URL是否有效，无效就显示本地默认头像：

CircleAvatar(
  radius: 18,
  backgroundImage: 
    // 先判断URL非空且是完整的绝对地址
    profilePicture.isNotEmpty && Uri.parse(profilePicture).isAbsolute
      ? NetworkImage(profilePicture)
      // 替换成你自己的本地默认头像路径
      : const AssetImage("assets/images/default_avatar.png") as ImageProvider,
)

或者你也可以用Image.network的errorBuilder来处理加载失败的情况：

CircleAvatar(
  radius: 18,
  child: profilePicture.isNotEmpty && Uri.parse(profilePicture).isAbsolute
    ? Image.network(
        profilePicture,
        fit: BoxFit.cover,
        // 加载失败时显示默认头像
        errorBuilder: (context, error, stackTrace) {
          return Image.asset("assets/images/default_avatar.png", fit: BoxFit.cover);
        },
      )
    : Image.asset("assets/images/default_avatar.png", fit: BoxFit.cover),
)

额外提醒 #

• 如果API返回的是相对路径（比如/uploads/avatar.jpg），你需要把它和API的基础域名拼接成完整URL，比如"${BASE_API}${responseJson[0]["profilePicture"]}"。
• 记得在pubspec.yaml里配置好本地默认头像的资源路径，不然加载本地图片也会报错。

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