如何解决Flutter从Django Rest API加载图片的RangeError问题

核心原因 #

你遇到的RangeError是因为showsList[index].image是空数组（或为null），直接访问[0]索引导致越界。结合Django API返回的图片路径特性，按以下步骤修复：

1. 先做数组非空判断，避免索引越界 #

不要直接用!强制解包并访问[0]，先检查数组是否为空：

// 替换原有的showsList[index].image![0]
final imagePath = showsList[index].image?.isNotEmpty == true 
    ? showsList[index].image![0] 
    : 'assets/default_promo.jpg'; // 替换成你的本地默认图路径

如果你的模型里image字段是可空List，也可以用更简洁的空安全写法（需导入package:collection/collection.dart）：

final imagePath = showsList[index].image?.firstOrNull ?? 'assets/default_promo.jpg';

2. 拼接Django API的完整图片URL #

Django返回的/media/images/xxx.jpg是相对路径，Flutter无法直接加载，必须拼接API的基础域名：

// 替换成你的Django API域名，比如https://your-api-domain.com
const apiBaseUrl = 'https://your-api-domain.com';

final fullImageUrl = showsList[index].image?.isNotEmpty == true 
    ? '$apiBaseUrl${showsList[index].image![0]}'
    : 'assets/default_promo.jpg';

3. 优化ShowsModel的JSON解析逻辑 #

确保模型在解析API返回数据时，正确处理image字段的空值情况：

class ShowsModel {
  final List<String>? image;
  // 其他字段...

  ShowsModel({this.image});

  factory ShowsModel.fromJson(Map<String, dynamic> json) {
    // 处理API返回image为null或空数组的情况
    final imageData = json['image'];
    List<String>? imageList;
    if (imageData != null) {
      imageList = List<String>.from(imageData);
    } else {
      imageList = []; // 或者设为null，根据业务需求调整
    }

    return ShowsModel(
      image: imageList,
      // 其他字段解析...
    );
  }
}

4. UI层添加加载容错 #

使用Image.network时，通过errorBuilder处理加载失败的情况：

Image.network(
  fullImageUrl,
  fit: BoxFit.cover,
  errorBuilder: (context, error, stackTrace) {
    return Image.asset('assets/default_promo.jpg'); // 加载失败显示默认图
  },
)

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