如何解决Flutter中从文件夹取图在ListView Builder不显示的问题？

核心问题：图片URL未正确拼接变量 #

你当前代码里的NetworkImage路径是硬写死的，没有把每个problem对应的image字段值插入进去，导致请求的是无效地址，所以加载失败显示蓝色圆圈。

修复步骤： #

1. 正确拼接图片URL
   把原来的硬编码URL改成字符串插值，根据你的服务器实际路径调整：

• 如果problem.image是图片文件名，路径应该是：

backgroundImage: NetworkImage(
  'http://192.168.1.148/skc/Problem_image/${problem.image}',
),

• 如果problem.image是要传递的查询参数，路径应该是：

backgroundImage: NetworkImage(
  'http://192.168.1.148/skc/Problem_image?image=${problem.image}',
),

2. 排查其他可能的问题

• 确认problem.image字段不为空，打印problem.image的值看看是不是有效的文件名/参数
• 直接在浏览器里访问拼接后的URL，确认图片能正常打开
• 检查AndroidManifest.xml（Android）是否添加了网络权限：

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

• 检查iOS的Info.plist是否允许HTTP请求（因为你用的是http不是https），添加以下配置：

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

修复后的完整代码片段 #

Expanded(
  child: StreamBuilder(
    stream: _streamController.stream,
    builder: (context, snapshots) {
      if (snapshots.hasData) {
        return ListView.builder(
          itemCount: problemlist.length,
          itemBuilder: ((context, index) {
            problemModel problem = problemlist[index];
            // 拼接正确的图片URL
            final imageUrl = 'http://192.168.1.148/skc/Problem_image/${problem.image}';
            return Card(
              margin: EdgeInsets.all(10),
              child: ListTile(
                leading: CircleAvatar(
                  child: Image.network(
                    imageUrl,
                    fit: BoxFit.cover,
                    errorBuilder: (context, error, stackTrace) {
                      // 加载失败时显示占位图标
                      return Icon(Icons.broken_image, color: Colors.grey);
                    },
                  ),
                ),
                title: Text(
                  problem.name_surname,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 19),
                ),
                subtitle: Text(
                  problem.status,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17),
                ),
                trailing: Text(
                  problem.created_at,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                ),
              ),
            );
          }));
      }
      return Center(child: CircularProgressIndicator());
    },
  ),
)

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