Flutter加载FastAPI返回图片报500错误 图片URL拆分方案

接口返回的imgs_url字段结构和前端预期不一致：接口返回的数组仅包含1个字符串元素，该元素是用英文逗号拼接的多个图片地址，而非拆分后的单URL独立元素。
前端代码直接取imgsUrl[0]时，拿到的是拼接后的整段多URL字符串，将其传入Image.network()后会把整串作为单个请求路径发起HTTP请求，服务端无法识别该非法路径，返回500状态码，最终触发NetworkImageLoadException。

1. 数据解析层统一处理脏数据（推荐） #

在ProductModel的JSON序列化逻辑中直接完成拼接字符串的拆分，过滤无效值，保证传递到UI层的imgsUrl始终是单URL元素组成的合法数组，示例代码如下：

class ProductModel {
  String? name;
  double? price;
  late List<String> imgsUrl;
  // 其余商品字段可根据实际业务补充

  ProductModel.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    price = json['price']?.toDouble();
    // 核心：处理拼接格式的图片地址
    final rawImgList = json['imgs_url'] as List? ?? [];
    final List<String> validImgUrls = [];
    for (final element in rawImgList) {
      if (element is String) {
        if (element.contains(',')) {
          // 拆分逗号拼接的多地址，去除首尾空格、过滤空值
          validImgUrls.addAll(
            element
                .split(',')
                .map((url) => url.trim())
                .where((url) => url.startsWith('http'))
                .toList(),
          );
        } else {
          // 正常单地址直接校验后加入
          final trimmedUrl = element.trim();
          if (trimmedUrl.startsWith('http')) {
            validImgUrls.add(trimmedUrl);
          }
        }
      }
    }
    imgsUrl = validImgUrls;
  }
}

2. UI层增加安全判断与兜底 #

在瀑布流列表渲染逻辑中，取图片索引前先做数组非空校验，同时增加加载失败兜底组件，避免单图异常导致整个列表渲染崩溃，示例代码：

// StaggeredGridView的item构建逻辑
StaggeredGridTile.count(
  crossAxisCellCount: 2,
  mainAxisCellCount: 3,
  child: Card(
    clipBehavior: Clip.hardEdge,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: SizedBox(
            width: double.infinity,
            child: product.imgsUrl.isNotEmpty
                ? Image.network(
                    product.imgsUrl[0], // 此时取到的是拆分后的合法单URL
                    fit: BoxFit.cover,
                    errorBuilder: (_, __, ___) => Container(
                      color: Colors.grey[200],
                      child: const Icon(Icons.image_not_supported, size: 32),
                    ),
                  )
                : Container(
                    color: Colors.grey[200],
                    child: const Icon(Icons.image_not_supported, size: 32),
                  ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(product.name ?? '', maxLines: 2, overflow: TextOverflow.ellipsis),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Text('¥${product.price ?? 0}', style: const TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
        )
      ],
    ),
  ),
)

3. 根源修复（后端可控时可选） #

如果FastAPI后端逻辑可调整，直接修改接口返回逻辑，在后端层完成图片URL的拆分，保证imgs_url返回的数组每个元素对应一个独立的合法图片地址，从源头避免前后端字段结构不匹配的问题。

• 拆分URL时必须对每个子串做trim()处理，去除地址前后可能存在的空格、换行符，避免非法URL导致请求失败
• 增加URL合法性校验，过滤非HTTP/HTTPS开头的无效地址
• 不要在UI层临时做字符串拆分，统一在数据解析层处理，避免后续其他用到图片列表的位置重复写相同逻辑

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