Flutter中Image.network加载网络图片不显示问题求助

针对你提供的滚动加载列表中Image.network无法显示图片的问题，可按以下步骤排查修复：

1. 检查平台网络权限 #

Android #

打开android/app/src/main/AndroidManifest.xml，确保添加了网络权限：

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

该权限默认在Flutter新项目中已配置，但如果被误删会导致无法发起网络请求。

iOS #

打开ios/Runner/Info.plist，确认HTTPS访问权限（你的图片URL是HTTPS，默认允许），若需兼容HTTP资源可添加以下配置（不建议生产环境使用）：

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

2. 添加错误捕获定位问题 #

给Image.network添加errorBuilder回调，直接打印加载错误信息，快速定位问题：

Image.network(
  'https://media.self.com/photos/6398b36c72eb56f726777d06/4:3/w_2560%2Cc_limit/weekly-workout-schedule.jpeg',
  width: 100,
  errorBuilder: (context, error, stackTrace) {
    print('图片加载错误详情: $error');
    return const Icon(Icons.broken_image, color: Colors.red);
  },
)

运行后查看控制台输出，即可明确是URL无效、网络不通还是其他加载异常。

3. 优化图片布局显示 #

当前仅设置了width:100，未指定高度或适配模式，可能导致图片因高度为0而不可见，建议添加fit属性或固定高度：

Image.network(
  'https://media.self.com/photos/6398b36c72eb56f726777d06/4:3/w_2560%2Cc_limit/weekly-workout-schedule.jpeg',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
  errorBuilder: (context, error, stackTrace) {
    print('图片加载错误详情: $error');
    return const Icon(Icons.broken_image, color: Colors.red);
  },
)

4. 验证图片URL有效性 #

直接在浏览器中打开图片URL，确认图片是否能正常显示：

• 如果浏览器也无法加载，说明URL已失效或被网络限制，需更换有效图片地址
• 如果浏览器能加载但Flutter中不行，检查设备网络环境（如是否使用代理、防火墙限制）

5. 测试网络请求可用性 #

使用http包测试网络请求，确认Flutter能正常访问该域名：

1. 在pubspec.yaml添加依赖：

dependencies:
  http: ^1.1.0

2. 在代码中添加测试代码：

import 'package:http/http.dart' as http;

// 在start方法或initState中调用测试
Future<void> testNetwork() async {
  try {
    final response = await http.get(Uri.parse('https://media.self.com/photos/6398b36c72eb56f726777d06/4:3/w_2560%2Cc_limit/weekly-workout-schedule.jpeg'));
    print('请求状态码: ${response.statusCode}');
  } catch (e) {
    print('网络请求失败: $e');
  }
}

如果请求失败，说明网络环境存在限制，需排查设备网络设置。

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