Flutter加载后端图片报错：URI未指定主机（file:///Screenshot%20(2).png）

问题根源 #

你遇到的错误是因为后端返回的图片字段只有文件名（如Screenshot%20(2).png），而Image.Network需要完整的HTTP协议URL（包含主机地址）。直接使用文件名时，Flutter会默认解析为file:///协议，导致缺少主机信息的错误。

解决方案 #

1. 拼接完整的图片访问URL #

结合你的Config类中的API地址，给图片文件名加上完整的HTTP前缀。假设后端的图片静态资源访问路径是/images/（需和后端实际配置一致），修改图片加载代码：

child: Image.Network(
  'http://${Config.apiURL}/images/${rooms[index].images![index]}',
  fit: BoxFit.cover,
  // 可选：添加错误占位图
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.broken_image);
  },
),

2. 确认后端静态资源配置 #

确保后端已经开启静态资源服务，允许通过http://192.168.56.1:3001/images/[图片名]的格式访问到图片。比如Node.js/Express中需要用express.static挂载图片目录：

// 示例后端代码（Node.js/Express）
app.use('/images', express.static('path/to/your/images/folder'));

3. 空值安全优化 #

避免因images数组为空或索引越界导致的崩溃，可增加空值判断：

child: rooms[index].images?.isNotEmpty == true 
    ? Image.Network(
        'http://${Config.apiURL}/images/${rooms[index].images![index]}',
        fit: BoxFit.cover,
        errorBuilder: (context, error, stackTrace) => Icon(Icons.broken_image),
      )
    : Icon(Icons.image_not_supported),

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