如何修改代码在ListView Builder中显示本地存储的图片？

你在ListView Builder中使用Image.network加载本地服务器Problem_image文件夹内的图片时遇到了显示问题，以下是具体排查和修改方案：

1. 验证图片URL有效性 #

直接在浏览器中输入图片的完整URL（将${problem.image}替换为数据库中存储的真实图片文件名），确认能否正常打开图片：

• 若无法打开，检查服务器端skc/Problem_image目录是否存在，且文件夹及图片文件权限设置为可读
• 核对数据库中存储的图片文件名与实际文件名是否完全一致（Linux服务器区分大小写）

2. 为Image.network添加错误/加载状态提示 #

修改Image.network代码，增加错误占位图和加载状态，便于定位问题：

leading: Image.network(
  'http://192.168.1.148/skc/Problem_image/${problem.image}',
  fit: BoxFit.cover,
  width: 100,
  // 加载失败时显示错误图标
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.error, color: Colors.red);
  },
  // 加载中显示进度条
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return const CircularProgressIndicator();
  },
),

3. 检查网络与权限配置 #

• 确保测试设备与服务器处于同一局域网（均为192.168.1.x网段）
• 安卓项目需在AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS项目需在Info.plist中配置网络权限（允许HTTP请求）：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

4. 确认数据正确性 #

在itemBuilder中打印图片文件名，验证数据是否正确读取：

itemBuilder: ((context, index) {
  problemModel problem = problemlist[index];
  print("当前图片文件名：${problem.image}"); // 打印文件名排查
  return Card(...);
})

同时确认StreamBuilder的snapshots.hasData触发时，problemlist已被正确填充数据。

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